← Back to Editor

#332B18 · #8E5C5D · #C08661 · #CDAE6D · #EAD6A4

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

#332B18

Ochre · DarkSlateGray · Amber Gold

HEX
#332B18
RGB
rgb(51, 43, 24)
HSL
hsl(42, 36%, 15%)
HSB
hsb(42, 53%, 20%)
CMYK
cmyk(0%, 16%, 53%, 80%)
Oklch
oklch(29.2% 0.033 87.5)

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

#8E5C5D

Crimson · DimGray · Passion Red

HEX
#8E5C5D
RGB
rgb(142, 92, 93)
HSL
hsl(359, 21%, 46%)
HSB
hsb(359, 35%, 56%)
CMYK
cmyk(0%, 35%, 35%, 44%)
Oklch
oklch(53.0% 0.066 18.2)

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

#C08661

Tangerine · DarkSalmon · Warm Sun

HEX
#C08661
RGB
rgb(192, 134, 97)
HSL
hsl(23, 43%, 57%)
HSB
hsb(23, 49%, 75%)
CMYK
cmyk(0%, 30%, 49%, 25%)
Oklch
oklch(67.0% 0.088 53.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#CDAE6D

Ginger · Tan · Sunflower

HEX
#CDAE6D
RGB
rgb(205, 174, 109)
HSL
hsl(41, 49%, 62%)
HSB
hsb(41, 47%, 80%)
CMYK
cmyk(0%, 15%, 47%, 20%)
Oklch
oklch(76.4% 0.091 84.8)

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

#EAD6A4

Goose Yellow · Wheat · Lemon Cream

HEX
#EAD6A4
RGB
rgb(234, 214, 164)
HSL
hsl(43, 62%, 78%)
HSB
hsb(43, 30%, 92%)
CMYK
cmyk(0%, 9%, 30%, 8%)
Oklch
oklch(88.0% 0.069 88.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

332B18
182134

Analogous

341E18
332B18
2F3418

Triadic

332B18
18342C
2C1834

Split-Comp.

332B18
182F34
1E1834

Tetradic

332B18
18341E
182134
34182F

Contrast Matrix WCAG 2.1 Contrast

332B18
8E5C5D
C08661
CDAE6D
EAD6A4
—
2.6
Fail
4.6
AA
6.6
AA
9.8
AAA
2.6
Fail
—
1.8
Fail
2.6
Fail
3.8
AA Large
4.6
AA
1.8
Fail
—
1.4
Fail
2.1
Fail
6.6
AA
2.6
Fail
1.4
Fail
—
1.5
Fail
9.8
AAA
3.8
AA Large
2.1
Fail
1.5
Fail
—
White BG
14.0AAA
5.5AA
3.1AA Large
2.1Fail
1.4Fail
Black BG
1.5Fail
3.8AA Large
6.8AA
9.9AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

302F1D
78785D
A7A66A
C0BF7D
E1E1B0

Deuteranopia

30311E
7B7F5D
AAAF6C
C1C481
E3E4B3

Tritanopia

332021
8C5D5D
BD7173
CB898C
E9BABC

Achromatopsia

2B2B2B
6B6B6B
939393
B0B0B0
D6D6D6

Shades & Tints Shades & Tints

#332B18

Dark
Light

#8E5C5D

Dark
Light

#C08661

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #332b18;
  --color-2: #8e5c5d;
  --color-3: #c08661;
  --color-4: #cdae6d;
  --color-5: #ead6a4;
}

SCSS

$color-1: #332b18;
$color-2: #8e5c5d;
$color-3: #c08661;
$color-4: #cdae6d;
$color-5: #ead6a4;

TAILWIND

colors: {
  'brand-1': '#332b18',
  'brand-2': '#8e5c5d',
  'brand-3': '#c08661',
  'brand-4': '#cdae6d',
  'brand-5': '#ead6a4',
}

RGB Array

[51, 43, 24], [142, 92, 93], [192, 134, 97], [205, 174, 109], [234, 214, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #332B18, #8E5C5D, #C08661, #CDAE6D, #EAD6A4 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: #332b18; --color-2: #8e5c5d; --color-3: #c08661; --color-4: #cdae6d; --color-5: #ead6a4. 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