← Back to Editor

#E4DEC7 · #493E28 · #D5A964 · #3C0B65 · #715F83

coffee

A 5-color coffee 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

#E4DEC7

Goose Yellow · LightGray · Lemon Cream

HEX
#E4DEC7
RGB
rgb(228, 222, 199)
HSL
hsl(48, 35%, 84%)
HSB
hsb(48, 13%, 89%)
CMYK
cmyk(0%, 3%, 13%, 11%)
Oklch
oklch(89.9% 0.031 94.9)

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

#493E28

Ochre · DarkOliveGreen · Amber Gold

HEX
#493E28
RGB
rgb(73, 62, 40)
HSL
hsl(40, 29%, 22%)
HSB
hsb(40, 45%, 29%)
CMYK
cmyk(0%, 15%, 45%, 71%)
Oklch
oklch(36.9% 0.038 84.1)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

#D5A964

Ginger · SandyBrown · Warm Sun

HEX
#D5A964
RGB
rgb(213, 169, 100)
HSL
hsl(37, 57%, 61%)
HSB
hsb(37, 53%, 84%)
CMYK
cmyk(0%, 21%, 53%, 16%)
Oklch
oklch(76.0% 0.101 77.6)

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

#3C0B65

Royal Purple · MidnightBlue · Eggplant

HEX
#3C0B65
RGB
rgb(60, 11, 101)
HSL
hsl(273, 80%, 22%)
HSB
hsb(273, 89%, 40%)
CMYK
cmyk(41%, 89%, 0%, 60%)
Oklch
oklch(29.6% 0.141 302.5)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

#715F83

Dark Plum · DimGray · Violet

HEX
#715F83
RGB
rgb(113, 95, 131)
HSL
hsl(270, 16%, 44%)
HSB
hsb(270, 27%, 51%)
CMYK
cmyk(14%, 27%, 0%, 49%)
Oklch
oklch(51.7% 0.060 307.2)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4DEC7
C8CEE4

Analogous

E4D0C8
E4DEC7
DCE4C8

Triadic

E4DEC7
C8E4DF
DFC8E4

Split-Comp.

E4DEC7
C8DCE4
D0C8E4

Tetradic

E4DEC7
C8E4D0
C8CEE4
E4C8DC

Contrast Matrix WCAG 2.1 Contrast

E4DEC7
493E28
D5A964
3C0B65
715F83
—
7.8
AAA
1.6
Fail
10.9
AAA
4.2
AA Large
7.8
AAA
—
4.8
AA
1.4
Fail
1.8
Fail
1.6
Fail
4.8
AA
—
6.8
AA
2.6
Fail
10.9
AAA
1.4
Fail
6.8
AA
—
2.6
Fail
4.2
AA Large
1.8
Fail
2.6
Fail
2.6
Fail
—
White BG
1.3Fail
10.5AAA
2.2Fail
14.7AAA
5.7AA
Black BG
15.6AAA
2.0Fail
9.7AAA
1.4Fail
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E1CD
44442D
C2C275
27264F
69697A

Deuteranopia

E2E2CE
45462F
C5C879
2A2D4A
6A6C78

Tritanopia

E4D1D2
483232
D38285
3A3E3A
707372

Achromatopsia

DDDDDD
3F3F3F
AEAEAE
242424
686868

Shades & Tints Shades & Tints

#E4DEC7

Dark
Light

#493E28

Dark
Light

#D5A964

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4dec7;
  --color-2: #493e28;
  --color-3: #d5a964;
  --color-4: #3c0b65;
  --color-5: #715f83;
}

SCSS

$color-1: #e4dec7;
$color-2: #493e28;
$color-3: #d5a964;
$color-4: #3c0b65;
$color-5: #715f83;

TAILWIND

colors: {
  'brand-1': '#e4dec7',
  'brand-2': '#493e28',
  'brand-3': '#d5a964',
  'brand-4': '#3c0b65',
  'brand-5': '#715f83',
}

RGB Array

[228, 222, 199], [73, 62, 40], [213, 169, 100], [60, 11, 101], [113, 95, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #E4DEC7, #493E28, #D5A964, #3C0B65, #715F83 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: #e4dec7; --color-2: #493e28; --color-3: #d5a964; --color-4: #3c0b65; --color-5: #715f83. 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. 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