← Back to Editor

#3E484F · #9C545F · #A17765 · #AB9D74 · #BDB288

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3E484F

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#3E484F
RGB
rgb(62, 72, 79)
HSL
hsl(205, 12%, 28%)
HSB
hsb(205, 22%, 31%)
CMYK
cmyk(22%, 9%, 0%, 69%)
Oklch
oklch(39.5% 0.018 238.5)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#9C545F

Crimson · Sienna · Passion Red

HEX
#9C545F
RGB
rgb(156, 84, 95)
HSL
hsl(351, 30%, 47%)
HSB
hsb(351, 46%, 61%)
CMYK
cmyk(0%, 46%, 39%, 39%)
Oklch
oklch(53.4% 0.096 11.1)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#A17765

Tangerine · Gray · Warm Sun

HEX
#A17765
RGB
rgb(161, 119, 101)
HSL
hsl(18, 24%, 51%)
HSB
hsb(18, 37%, 63%)
CMYK
cmyk(0%, 26%, 37%, 37%)
Oklch
oklch(60.6% 0.059 44.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#AB9D74

Ginger · DarkSeaGreen · Sunflower

HEX
#AB9D74
RGB
rgb(171, 157, 116)
HSL
hsl(45, 25%, 56%)
HSB
hsb(45, 32%, 67%)
CMYK
cmyk(0%, 8%, 32%, 33%)
Oklch
oklch(69.8% 0.059 91.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#BDB288

Ginger · Tan · Sunflower

HEX
#BDB288
RGB
rgb(189, 178, 136)
HSL
hsl(48, 29%, 64%)
HSB
hsb(48, 28%, 74%)
CMYK
cmyk(0%, 6%, 28%, 26%)
Oklch
oklch(76.2% 0.058 95.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3E484F
50463F

Analogous

3F504F
3E484F
3F4050

Triadic

3E484F
503F49
49503F

Split-Comp.

3E484F
503F40
504F3F

Tetradic

3E484F
4F3F50
50463F
40503F

Contrast Matrix WCAG 2.1 Contrast

3E484F
9C545F
A17765
AB9D74
BDB288
—
1.7
Fail
2.4
Fail
3.5
AA Large
4.4
AA Large
1.7
Fail
—
1.4
Fail
2.0
Fail
2.6
Fail
2.4
Fail
1.4
Fail
—
1.5
Fail
1.9
Fail
3.5
AA Large
2.0
Fail
1.5
Fail
—
1.3
Fail
4.4
AA Large
2.6
Fail
1.9
Fail
1.3
Fail
—
White BG
9.4AAA
5.5AA
3.9AA Large
2.7Fail
2.1Fail
Black BG
2.2Fail
3.8AA Large
5.3AA
7.8AAA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

42424D
7D7C5C
8F8E69
A5A57E
B8B892

Deuteranopia

42414D
81865C
91946A
A6A780
B9BA95

Tritanopia

3F4C4C
985A5A
9F6D6E
AA8687
BC9A9C

Achromatopsia

464646
6B6B6B
828282
9D9D9D
B1B1B1

Shades & Tints Shades & Tints

#3E484F

Dark
Light

#9C545F

Dark
Light

#A17765

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3e484f;
  --color-2: #9c545f;
  --color-3: #a17765;
  --color-4: #ab9d74;
  --color-5: #bdb288;
}

SCSS

$color-1: #3e484f;
$color-2: #9c545f;
$color-3: #a17765;
$color-4: #ab9d74;
$color-5: #bdb288;

TAILWIND

colors: {
  'brand-1': '#3e484f',
  'brand-2': '#9c545f',
  'brand-3': '#a17765',
  'brand-4': '#ab9d74',
  'brand-5': '#bdb288',
}

RGB Array

[62, 72, 79], [156, 84, 95], [161, 119, 101], [171, 157, 116], [189, 178, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3E484F, #9C545F, #A17765, #AB9D74, #BDB288 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #3e484f; --color-2: #9c545f; --color-3: #a17765; --color-4: #ab9d74; --color-5: #bdb288. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color