← Back to Editor

#D9B052 · #BAA36E · #6B6E82 · #4B4D59 · #3F414D

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

#D9B052

Ginger · SandyBrown · Sunflower

HEX
#D9B052
RGB
rgb(217, 176, 82)
HSL
hsl(42, 64%, 59%)
HSB
hsb(42, 62%, 85%)
CMYK
cmyk(0%, 19%, 62%, 15%)
Oklch
oklch(77.6% 0.122 85.6)

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

#BAA36E

Ginger · Tan · Sunflower

HEX
#BAA36E
RGB
rgb(186, 163, 110)
HSL
hsl(42, 36%, 58%)
HSB
hsb(42, 41%, 73%)
CMYK
cmyk(0%, 12%, 41%, 27%)
Oklch
oklch(72.3% 0.075 87.0)

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

#6B6E82

Indigo · SlateGray · Navy Blue

HEX
#6B6E82
RGB
rgb(107, 110, 130)
HSL
hsl(232, 10%, 46%)
HSB
hsb(232, 18%, 51%)
CMYK
cmyk(18%, 15%, 0%, 49%)
Oklch
oklch(54.3% 0.031 278.6)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#4B4D59

Indigo · DarkSlateGray · Charcoal

HEX
#4B4D59
RGB
rgb(75, 77, 89)
HSL
hsl(231, 9%, 32%)
HSB
hsb(231, 16%, 35%)
CMYK
cmyk(16%, 13%, 0%, 65%)
Oklch
oklch(42.3% 0.020 278.0)

Traditional「Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#3F414D

Indigo · DarkSlateGray · Prussian Blue

HEX
#3F414D
RGB
rgb(63, 65, 77)
HSL
hsl(231, 10%, 27%)
HSB
hsb(231, 18%, 30%)
CMYK
cmyk(18%, 16%, 0%, 70%)
Oklch
oklch(37.8% 0.021 277.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9B052
547CD9

Analogous

D96E54
D9B052
BFD954

Triadic

D9B052
54D9B1
B154D9

Split-Comp.

D9B052
54BFD9
6E54D9

Tetradic

D9B052
54D96E
547CD9
D954BF

Contrast Matrix WCAG 2.1 Contrast

D9B052
BAA36E
6B6E82
4B4D59
3F414D
—
1.2
Fail
2.5
Fail
4.1
AA Large
5.0
AA
1.2
Fail
—
2.0
Fail
3.4
AA Large
4.1
AA Large
2.5
Fail
2.0
Fail
—
1.7
Fail
2.0
Fail
4.1
AA Large
3.4
AA Large
1.7
Fail
—
1.2
Fail
5.0
AA
4.1
AA Large
2.0
Fail
1.2
Fail
—
White BG
2.0Fail
2.5Fail
5.0AA
8.4AAA
10.1AAA
Black BG
10.3AAA
8.6AAA
4.2AA Large
2.5Fail
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C769
B0B07B
6C6C7D
4C4C56
40404A

Deuteranopia

CACD6E
B1B37E
6C6C7C
4C4C55
404049

Tritanopia

D77B7F
B98587
6B7979
4B5453
3F4847

Achromatopsia

B2B2B2
A4A4A4
6F6F6F
4E4E4E
424242

Shades & Tints Shades & Tints

#D9B052

Dark
Light

#BAA36E

Dark
Light

#6B6E82

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9b052;
  --color-2: #baa36e;
  --color-3: #6b6e82;
  --color-4: #4b4d59;
  --color-5: #3f414d;
}

SCSS

$color-1: #d9b052;
$color-2: #baa36e;
$color-3: #6b6e82;
$color-4: #4b4d59;
$color-5: #3f414d;

TAILWIND

colors: {
  'brand-1': '#d9b052',
  'brand-2': '#baa36e',
  'brand-3': '#6b6e82',
  'brand-4': '#4b4d59',
  'brand-5': '#3f414d',
}

RGB Array

[217, 176, 82], [186, 163, 110], [107, 110, 130], [75, 77, 89], [63, 65, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9B052, #BAA36E, #6B6E82, #4B4D59, #3F414D 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: #d9b052; --color-2: #baa36e; --color-3: #6b6e82; --color-4: #4b4d59; --color-5: #3f414d. 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