← Back to Editor

#DEC478 · #B5A164 · #C9BA8B · #8A836E · #3B372B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#DEC478

Ginger · BurlyWood · Sunflower

HEX
#DEC478
RGB
rgb(222, 196, 120)
HSL
hsl(45, 61%, 67%)
HSB
hsb(45, 46%, 87%)
CMYK
cmyk(0%, 12%, 46%, 13%)
Oklch
oklch(82.6% 0.100 91.2)

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

#B5A164

Ginger · Tan · Sunflower

HEX
#B5A164
RGB
rgb(181, 161, 100)
HSL
hsl(45, 35%, 55%)
HSB
hsb(45, 45%, 71%)
CMYK
cmyk(0%, 11%, 45%, 29%)
Oklch
oklch(71.3% 0.084 91.9)

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

#C9BA8B

Ginger · Tan · Sunflower

HEX
#C9BA8B
RGB
rgb(201, 186, 139)
HSL
hsl(45, 36%, 67%)
HSB
hsb(45, 31%, 79%)
CMYK
cmyk(0%, 7%, 31%, 21%)
Oklch
oklch(79.0% 0.065 92.5)

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

#8A836E

Ochre · Gray · Honey Gold

HEX
#8A836E
RGB
rgb(138, 131, 110)
HSL
hsl(45, 11%, 49%)
HSB
hsb(45, 20%, 54%)
CMYK
cmyk(0%, 5%, 20%, 46%)
Oklch
oklch(61.0% 0.032 91.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#3B372B

Ochre · DarkSlateGray · Amber Gold

HEX
#3B372B
RGB
rgb(59, 55, 43)
HSL
hsl(45, 16%, 20%)
HSB
hsb(45, 27%, 23%)
CMYK
cmyk(0%, 7%, 27%, 77%)
Oklch
oklch(33.7% 0.021 91.8)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEC478
7891DE

Analogous

DE9178
DEC478
C5DE78

Triadic

DEC478
78DEC5
C578DE

Split-Comp.

DEC478
78C5DE
9178DE

Tetradic

DEC478
78DE91
7891DE
DE78C5

Contrast Matrix WCAG 2.1 Contrast

DEC478
B5A164
C9BA8B
8A836E
3B372B
—
1.5
Fail
1.1
Fail
2.2
Fail
6.9
AA
1.5
Fail
—
1.3
Fail
1.5
Fail
4.7
AA
1.1
Fail
1.3
Fail
—
2.0
Fail
6.2
AA
2.2
Fail
1.5
Fail
2.0
Fail
—
3.1
AA Large
6.9
AA
4.7
AA
6.2
AA
3.1
AA Large
—
White BG
1.7Fail
2.5Fail
1.9Fail
3.8AA Large
11.9AAA
Black BG
12.3AAA
8.2AAA
10.9AAA
5.6AA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D38A
ACAC73
C3C296
878773
39392E

Deuteranopia

D4D68F
AEAF76
C3C599
878874
3A3A2F

Tritanopia

DD999C
B47E81
C89FA1
8A7778
3B3031

Achromatopsia

C3C3C3
A0A0A0
B9B9B9
838383
373737

Shades & Tints Shades & Tints

#DEC478

Dark
Light

#B5A164

Dark
Light

#C9BA8B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dec478;
  --color-2: #b5a164;
  --color-3: #c9ba8b;
  --color-4: #8a836e;
  --color-5: #3b372b;
}

SCSS

$color-1: #dec478;
$color-2: #b5a164;
$color-3: #c9ba8b;
$color-4: #8a836e;
$color-5: #3b372b;

TAILWIND

colors: {
  'brand-1': '#dec478',
  'brand-2': '#b5a164',
  'brand-3': '#c9ba8b',
  'brand-4': '#8a836e',
  'brand-5': '#3b372b',
}

RGB Array

[222, 196, 120], [181, 161, 100], [201, 186, 139], [138, 131, 110], [59, 55, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DEC478, #B5A164, #C9BA8B, #8A836E, #3B372B is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dec478; --color-2: #b5a164; --color-3: #c9ba8b; --color-4: #8a836e; --color-5: #3b372b. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. 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