← Back to Editor

#E5E6DC · #D1DED9 · #A0BABE · #807379 · #5F4D51

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E5E6DC

Fresh Green · Beige · Lemon Cream

HEX
#E5E6DC
RGB
rgb(229, 230, 220)
HSL
hsl(66, 17%, 88%)
HSB
hsb(66, 4%, 90%)
CMYK
cmyk(0%, 0%, 4%, 10%)
Oklch
oklch(92.1% 0.013 111.3)

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

#D1DED9

Jade · LightGray · Mint Green

HEX
#D1DED9
RGB
rgb(209, 222, 217)
HSL
hsl(157, 16%, 85%)
HSB
hsb(157, 6%, 87%)
CMYK
cmyk(6%, 0%, 2%, 13%)
Oklch
oklch(88.9% 0.016 171.0)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#A0BABE

Sky Blue · DarkGray · Lake Green

HEX
#A0BABE
RGB
rgb(160, 186, 190)
HSL
hsl(188, 19%, 69%)
HSB
hsb(188, 16%, 75%)
CMYK
cmyk(16%, 2%, 0%, 25%)
Oklch
oklch(77.1% 0.029 207.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#807379

Ink Gray · Gray · Warm Gray

HEX
#807379
RGB
rgb(128, 115, 121)
HSL
hsl(332, 5%, 48%)
HSB
hsb(332, 10%, 50%)
CMYK
cmyk(0%, 10%, 5%, 50%)
Oklch
oklch(56.9% 0.018 348.0)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#5F4D51

Crimson · DimGray · Wine Red

HEX
#5F4D51
RGB
rgb(95, 77, 81)
HSL
hsl(347, 10%, 34%)
HSB
hsb(347, 19%, 37%)
CMYK
cmyk(0%, 19%, 15%, 63%)
Oklch
oklch(44.0% 0.025 3.2)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E5E6DC
DCDBE6

Analogous

E6E1DB
E5E6DC
DFE6DB

Triadic

E5E6DC
DBE5E6
E6DBE5

Split-Comp.

E5E6DC
DBDFE6
E1DBE6

Tetradic

E5E6DC
DBE6E1
DCDBE6
E6DBDF

Contrast Matrix WCAG 2.1 Contrast

E5E6DC
D1DED9
A0BABE
807379
5F4D51
—
1.1
Fail
1.6
Fail
3.6
AA Large
6.3
AA
1.1
Fail
—
1.5
Fail
3.3
AA Large
5.7
AA
1.6
Fail
1.5
Fail
—
2.2
Fail
3.8
AA Large
3.6
AA Large
3.3
AA Large
2.2
Fail
—
1.7
Fail
6.3
AA
5.7
AA
3.8
AA Large
1.7
Fail
—
White BG
1.3Fail
1.4Fail
2.0Fail
4.5AA
7.9AAA
Black BG
16.7AAA
15.2AAA
10.3AAA
4.6AA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E5DE
D7D7DA
ABABBD
7A7A78
575750

Deuteranopia

E5E5DF
D6D5DA
AAA8BD
7B7C77
585A50

Tritanopia

E5E0E1
D2DBDB
A1BCBC
7F7676
5E4F4F

Achromatopsia

E5E5E5
DADADA
B3B3B3
787878
535353

Shades & Tints Shades & Tints

#E5E6DC

Dark
Light

#D1DED9

Dark
Light

#A0BABE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e5e6dc;
  --color-2: #d1ded9;
  --color-3: #a0babe;
  --color-4: #807379;
  --color-5: #5f4d51;
}

SCSS

$color-1: #e5e6dc;
$color-2: #d1ded9;
$color-3: #a0babe;
$color-4: #807379;
$color-5: #5f4d51;

TAILWIND

colors: {
  'brand-1': '#e5e6dc',
  'brand-2': '#d1ded9',
  'brand-3': '#a0babe',
  'brand-4': '#807379',
  'brand-5': '#5f4d51',
}

RGB Array

[229, 230, 220], [209, 222, 217], [160, 186, 190], [128, 115, 121], [95, 77, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #E5E6DC, #D1DED9, #A0BABE, #807379, #5F4D51 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e5e6dc; --color-2: #d1ded9; --color-3: #a0babe; --color-4: #807379; --color-5: #5f4d51. 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 coffee-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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