#ECE8B1 + #E9C787 + #D9CD9F + #D8DD84 + #8E907D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECE8B1

Fresh Green · Wheat · Lemon Cream

HEX

#ECE8B1

RGB

rgb(236, 232, 177)

HSL

hsl(56, 61%, 81%)

HSB

hsb(56, 25%, 93%)

CMYK

cmyk(0%, 2%, 25%, 7%)

Oklch

oklch(92.1% 0.071 104.2)

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

#E9C787

Goose Yellow · BurlyWood · Warm Sun

HEX

#E9C787

RGB

rgb(233, 199, 135)

HSL

hsl(39, 69%, 72%)

HSB

hsb(39, 42%, 91%)

CMYK

cmyk(0%, 15%, 42%, 9%)

Oklch

oklch(84.4% 0.090 82.7)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D9CD9F

Goose Yellow · Tan · Sunflower

HEX

#D9CD9F

RGB

rgb(217, 205, 159)

HSL

hsl(48, 43%, 74%)

HSB

hsb(48, 27%, 85%)

CMYK

cmyk(0%, 6%, 27%, 15%)

Oklch

oklch(84.7% 0.062 95.2)

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

#D8DD84

Fresh Green · Khaki · Sunflower

HEX

#D8DD84

RGB

rgb(216, 221, 132)

HSL

hsl(63, 57%, 69%)

HSB

hsb(63, 40%, 87%)

CMYK

cmyk(2%, 0%, 40%, 13%)

Oklch

oklch(87.4% 0.112 111.3)

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

#8E907D

Autumn Sage · Gray · Warm Gray

HEX

#8E907D

RGB

rgb(142, 144, 125)

HSL

hsl(66, 8%, 53%)

HSB

hsb(66, 13%, 56%)

CMYK

cmyk(1%, 0%, 13%, 44%)

Oklch

oklch(64.6% 0.028 112.0)

Traditional「Autumn Sage」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECE8B1

B1B5EC

Analogous

ECCBB1

ECE8B1

D2ECB1

Triadic

ECE8B1

B1ECE8

E8B1EC

Split-Comp.

ECE8B1

B1D2EC

CBB1EC

Tetradic

ECE8B1

B1ECCB

B1B5EC

ECB1D2

Contrast Matrix WCAG 2.1 Contrast

ECE8B1	E9C787	D9CD9F	D8DD84	8E907D
—	1.3 Fail	1.3 Fail	1.1 Fail	2.6 Fail
1.3 Fail	—	1.0 Fail	1.1 Fail	2.0 Fail
1.3 Fail	1.0 Fail	—	1.1 Fail	2.0 Fail
1.1 Fail	1.1 Fail	1.1 Fail	—	2.3 Fail
2.6 Fail	2.0 Fail	2.0 Fail	2.3 Fail	—

White BG

1.3Fail

1.6Fail

1.4Fail

3.3AA Large

Black BG

16.7AAA

13.0AAA

13.2AAA

14.6AAA

6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEABE

DADA96

D4D4AA

DADA9A

8F8F82

Deuteranopia

EBEBC2

DCDF9A

D5D5AD

DADA9F

8F8F83

Tritanopia

ECC9CB

E7A3A5

D8B3B5

D8ABAE

8E8586

Achromatopsia

E3E3E3

CACACA

CBCBCB

D1D1D1

8D8D8D

Shades & Tints Shades & Tints

#ECE8B1

Dark

Light

#E9C787

Dark

Light

#D9CD9F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ece8b1;
  --color-2: #e9c787;
  --color-3: #d9cd9f;
  --color-4: #d8dd84;
  --color-5: #8e907d;
}

SCSS

$color-1: #ece8b1;
$color-2: #e9c787;
$color-3: #d9cd9f;
$color-4: #d8dd84;
$color-5: #8e907d;

TAILWIND

colors: {
  'brand-1': '#ece8b1',
  'brand-2': '#e9c787',
  'brand-3': '#d9cd9f',
  'brand-4': '#d8dd84',
  'brand-5': '#8e907d',
}

RGB Array

[236, 232, 177], [233, 199, 135], [217, 205, 159], [216, 221, 132], [142, 144, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECE8B1, #E9C787, #D9CD9F, #D8DD84, #8E907D is ideal for: health products, baby brands, fresh-style blogs. 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: #ece8b1; --color-2: #e9c787; --color-3: #d9cd9f; --color-4: #d8dd84; --color-5: #8e907d. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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