← Back to Editor

#D8D65B · #ECF7AB · #CCAB4A · #554D4A · #D7A570

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

#D8D65B

Autumn Sage · BurlyWood · Sunflower

HEX
#D8D65B
RGB
rgb(216, 214, 91)
HSL
hsl(59, 62%, 60%)
HSB
hsb(59, 58%, 85%)
CMYK
cmyk(0%, 1%, 58%, 15%)
Oklch
oklch(85.4% 0.144 108.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#ECF7AB

Fresh Green · Wheat · Lemon Cream

HEX
#ECF7AB
RGB
rgb(236, 247, 171)
HSL
hsl(69, 83%, 82%)
HSB
hsb(69, 31%, 97%)
CMYK
cmyk(4%, 0%, 31%, 3%)
Oklch
oklch(95.0% 0.097 115.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#CCAB4A

Ginger · GoldenRod · Sunflower

HEX
#CCAB4A
RGB
rgb(204, 171, 74)
HSL
hsl(45, 56%, 55%)
HSB
hsb(45, 64%, 80%)
CMYK
cmyk(0%, 16%, 64%, 20%)
Oklch
oklch(75.2% 0.121 90.3)

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

#554D4A

Ink Gray · DarkSlateGray · Charcoal

HEX
#554D4A
RGB
rgb(85, 77, 74)
HSL
hsl(16, 7%, 31%)
HSB
hsb(16, 13%, 33%)
CMYK
cmyk(0%, 9%, 13%, 67%)
Oklch
oklch(42.7% 0.012 41.8)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#D7A570

Ginger · DarkSalmon · Warm Sun

HEX
#D7A570
RGB
rgb(215, 165, 112)
HSL
hsl(31, 56%, 64%)
HSB
hsb(31, 48%, 84%)
CMYK
cmyk(0%, 23%, 48%, 16%)
Oklch
oklch(75.6% 0.091 67.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8D65B
5A5CD8

Analogous

D8975A
D8D65B
9BD85A

Triadic

D8D65B
5AD8D6
D65AD8

Split-Comp.

D8D65B
5A9BD8
975AD8

Tetradic

D8D65B
5AD897
5A5CD8
D85A9B

Contrast Matrix WCAG 2.1 Contrast

D8D65B
ECF7AB
CCAB4A
554D4A
D7A570
—
1.3
Fail
1.4
Fail
5.4
AA
1.4
Fail
1.3
Fail
—
1.9
Fail
7.2
AAA
1.9
Fail
1.4
Fail
1.9
Fail
—
3.7
AA Large
1.0
Fail
5.4
AA
7.2
AAA
3.7
AA Large
—
3.7
AA Large
1.4
Fail
1.9
Fail
1.0
Fail
3.7
AA Large
—
White BG
1.5Fail
1.1Fail
2.2Fail
8.2AAA
2.2Fail
Black BG
13.7AAA
18.5AAA
9.5AAA
2.5Fail
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D779
F1F1BD
BEBD61
52514B
C1C17D

Deuteranopia

D7D780
F0EFC2
C0C267
52534B
C4C880

Tritanopia

D89095
EDCCCF
CA7478
554B4B
D58789

Achromatopsia

C9C9C9
EBEBEB
AAAAAA
4F4F4F
AEAEAE

Shades & Tints Shades & Tints

#D8D65B

Dark
Light

#ECF7AB

Dark
Light

#CCAB4A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8d65b;
  --color-2: #ecf7ab;
  --color-3: #ccab4a;
  --color-4: #554d4a;
  --color-5: #d7a570;
}

SCSS

$color-1: #d8d65b;
$color-2: #ecf7ab;
$color-3: #ccab4a;
$color-4: #554d4a;
$color-5: #d7a570;

TAILWIND

colors: {
  'brand-1': '#d8d65b',
  'brand-2': '#ecf7ab',
  'brand-3': '#ccab4a',
  'brand-4': '#554d4a',
  'brand-5': '#d7a570',
}

RGB Array

[216, 214, 91], [236, 247, 171], [204, 171, 74], [85, 77, 74], [215, 165, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8D65B, #ECF7AB, #CCAB4A, #554D4A, #D7A570 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: #d8d65b; --color-2: #ecf7ab; --color-3: #ccab4a; --color-4: #554d4a; --color-5: #d7a570. 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