#E3E3E5 + #E1D0B6 + #C1B197 + #CDA172 + #B4C75B · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E3E3E5

Plain White · Lavender · Cloud White

HEX

#E3E3E5

RGB

rgb(227, 227, 229)

HSL

hsl(240, 4%, 89%)

HSB

hsb(240, 1%, 90%)

CMYK

cmyk(1%, 1%, 0%, 10%)

Oklch

oklch(91.6% 0.003 286.3)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#E1D0B6

Goose Yellow · Wheat · Peach Orange

HEX

#E1D0B6

RGB

rgb(225, 208, 182)

HSL

hsl(36, 42%, 80%)

HSB

hsb(36, 19%, 88%)

CMYK

cmyk(0%, 8%, 19%, 12%)

Oklch

oklch(86.5% 0.040 78.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#C1B197

Ginger · Tan · Warm Sun

HEX

#C1B197

RGB

rgb(193, 177, 151)

HSL

hsl(37, 25%, 67%)

HSB

hsb(37, 22%, 76%)

CMYK

cmyk(0%, 8%, 22%, 24%)

Oklch

oklch(76.7% 0.040 79.9)

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

#CDA172

Ginger · DarkSalmon · Warm Sun

HEX

#CDA172

RGB

rgb(205, 161, 114)

HSL

hsl(31, 48%, 63%)

HSB

hsb(31, 44%, 80%)

CMYK

cmyk(0%, 21%, 44%, 20%)

Oklch

oklch(73.9% 0.081 67.9)

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

#B4C75B

Grass Green · Tan · Olive Green

HEX

#B4C75B

RGB

rgb(180, 199, 91)

HSL

hsl(71, 49%, 57%)

HSB

hsb(71, 54%, 78%)

CMYK

cmyk(10%, 0%, 54%, 22%)

Oklch

oklch(79.3% 0.135 117.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3E3E5

E4E4E2

Analogous

E2E3E4

E3E3E5

E3E2E4

Triadic

E3E3E5

E4E2E2

E2E4E2

Split-Comp.

E3E3E5

E4E3E2

E3E4E2

Tetradic

E3E3E5

E4E2E3

E4E4E2

E2E4E3

Contrast Matrix WCAG 2.1 Contrast

E3E3E5	E1D0B6	C1B197	CDA172	B4C75B
—	1.2 Fail	1.6 Fail	1.8 Fail	1.5 Fail
1.2 Fail	—	1.4 Fail	1.6 Fail	1.2 Fail
1.6 Fail	1.4 Fail	—	1.1 Fail	1.1 Fail
1.8 Fail	1.6 Fail	1.1 Fail	—	1.3 Fail
1.5 Fail	1.2 Fail	1.1 Fail	1.3 Fail	—

White BG

1.3Fail

1.5Fail

2.1Fail

2.3Fail

1.9Fail

Black BG

16.4AAA

13.9AAA

10.0AAA

8.9AAA

11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3E5

DAD9BC

BABA9D

BABA7D

BCBC75

Deuteranopia

E3E3E4

DBDCBE

BBBC9F

BDC080

BBBA7B

Tritanopia

E3E4E4

E0C1C2

C0A2A3

CB8688

B58A8E

Achromatopsia

E3E3E3

D2D2D2

B3B3B3

A9A9A9

B5B5B5

Shades & Tints Shades & Tints

#E3E3E5

Dark

Light

#E1D0B6

Dark

Light

#C1B197

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3e3e5;
  --color-2: #e1d0b6;
  --color-3: #c1b197;
  --color-4: #cda172;
  --color-5: #b4c75b;
}

SCSS

$color-1: #e3e3e5;
$color-2: #e1d0b6;
$color-3: #c1b197;
$color-4: #cda172;
$color-5: #b4c75b;

TAILWIND

colors: {
  'brand-1': '#e3e3e5',
  'brand-2': '#e1d0b6',
  'brand-3': '#c1b197',
  'brand-4': '#cda172',
  'brand-5': '#b4c75b',
}

RGB Array

[227, 227, 229], [225, 208, 182], [193, 177, 151], [205, 161, 114], [180, 199, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #E3E3E5, #E1D0B6, #C1B197, #CDA172, #B4C75B 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: #e3e3e5; --color-2: #e1d0b6; --color-3: #c1b197; --color-4: #cda172; --color-5: #b4c75b. 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 coffee-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