← Back to Editor

#EED38E · #D8C47F · #B4A77B · #8B8B6F · #738368

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 Library

Color Details Color Details

#EED38E

Goose Yellow · Khaki · Sunflower

HEX
#EED38E
RGB
rgb(238, 211, 142)
HSL
hsl(43, 74%, 75%)
HSB
hsb(43, 40%, 93%)
CMYK
cmyk(0%, 11%, 40%, 7%)
Oklch
oklch(87.4% 0.092 89.0)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#D8C47F

Ginger · BurlyWood · Sunflower

HEX
#D8C47F
RGB
rgb(216, 196, 127)
HSL
hsl(47, 53%, 67%)
HSB
hsb(47, 41%, 85%)
CMYK
cmyk(0%, 9%, 41%, 15%)
Oklch
oklch(82.2% 0.091 93.8)

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

#B4A77B

Ginger · Tan · Sunflower

HEX
#B4A77B
RGB
rgb(180, 167, 123)
HSL
hsl(46, 28%, 59%)
HSB
hsb(46, 32%, 71%)
CMYK
cmyk(0%, 7%, 32%, 29%)
Oklch
oklch(72.8% 0.062 93.6)

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

#8B8B6F

Autumn Sage · Gray · Honey Gold

HEX
#8B8B6F
RGB
rgb(139, 139, 111)
HSL
hsl(60, 11%, 49%)
HSB
hsb(60, 20%, 55%)
CMYK
cmyk(0%, 0%, 20%, 45%)
Oklch
oklch(62.9% 0.040 107.5)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#738368

Celadon · Gray · Olive Green

HEX
#738368
RGB
rgb(115, 131, 104)
HSL
hsl(96, 11%, 46%)
HSB
hsb(96, 21%, 51%)
CMYK
cmyk(12%, 0%, 21%, 49%)
Oklch
oklch(58.9% 0.044 132.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EED38E
90ABEE

Analogous

EEA590
EED38E
DAEE90

Triadic

EED38E
90EED4
D490EE

Split-Comp.

EED38E
90DAEE
A590EE

Tetradic

EED38E
90EEA5
90ABEE
EE90DA

Contrast Matrix WCAG 2.1 Contrast

EED38E
D8C47F
B4A77B
8B8B6F
738368
—
1.2
Fail
1.6
Fail
2.4
Fail
2.8
Fail
1.2
Fail
—
1.4
Fail
2.0
Fail
2.3
Fail
1.6
Fail
1.4
Fail
—
1.5
Fail
1.7
Fail
2.4
Fail
2.0
Fail
1.5
Fail
—
1.2
Fail
2.8
Fail
2.3
Fail
1.7
Fail
1.2
Fail
—
White BG
1.5Fail
1.7Fail
2.4Fail
3.5AA Large
4.1AA Large
Black BG
14.3AAA
12.1AAA
8.8AAA
6.0AA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E29F
CFCF90
AEAE86
8B8B76
7A7A6F

Deuteranopia

E4E6A3
D1D294
AFB088
8B8B77
797870

Tritanopia

EDACAF
D79DA0
B38E90
8B7B7C
747475

Achromatopsia

D3D3D3
C2C2C2
A6A6A6
888888
7B7B7B

Shades & Tints Shades & Tints

#EED38E

Dark
Light

#D8C47F

Dark
Light

#B4A77B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #eed38e;
  --color-2: #d8c47f;
  --color-3: #b4a77b;
  --color-4: #8b8b6f;
  --color-5: #738368;
}

SCSS

$color-1: #eed38e;
$color-2: #d8c47f;
$color-3: #b4a77b;
$color-4: #8b8b6f;
$color-5: #738368;

TAILWIND

colors: {
  'brand-1': '#eed38e',
  'brand-2': '#d8c47f',
  'brand-3': '#b4a77b',
  'brand-4': '#8b8b6f',
  'brand-5': '#738368',
}

RGB Array

[238, 211, 142], [216, 196, 127], [180, 167, 123], [139, 139, 111], [115, 131, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EED38E, #D8C47F, #B4A77B, #8B8B6F, #738368 is ideal for: corporate websites, product showcases, portfolios. 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: #eed38e; --color-2: #d8c47f; --color-3: #b4a77b; --color-4: #8b8b6f; --color-5: #738368. 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. 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