← Back to Editor

#ECDDCA · #836E5B · #48321D · #332412 · #600000

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

#ECDDCA

Goose Yellow · Bisque · Peach Orange

HEX
#ECDDCA
RGB
rgb(236, 221, 202)
HSL
hsl(34, 47%, 86%)
HSB
hsb(34, 14%, 93%)
CMYK
cmyk(0%, 6%, 14%, 7%)
Oklch
oklch(90.5% 0.030 73.9)

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

#836E5B

Tangerine · DimGray · Amber Brown

HEX
#836E5B
RGB
rgb(131, 110, 91)
HSL
hsl(29, 18%, 44%)
HSB
hsb(29, 31%, 51%)
CMYK
cmyk(0%, 16%, 31%, 49%)
Oklch
oklch(55.3% 0.039 64.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#48321D

Tangerine · DarkOliveGreen · Cinnamon

HEX
#48321D
RGB
rgb(72, 50, 29)
HSL
hsl(29, 43%, 20%)
HSB
hsb(29, 60%, 28%)
CMYK
cmyk(0%, 31%, 60%, 72%)
Oklch
oklch(33.7% 0.046 63.9)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#332412

Ochre · Black · Cinnamon

HEX
#332412
RGB
rgb(51, 36, 18)
HSL
hsl(33, 48%, 14%)
HSB
hsb(33, 65%, 20%)
CMYK
cmyk(0%, 29%, 65%, 80%)
Oklch
oklch(27.4% 0.037 70.3)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#600000

Vermilion · Maroon · Deep Berry

HEX
#600000
RGB
rgb(96, 0, 0)
HSL
hsl(0, 100%, 19%)
HSB
hsb(0, 100%, 38%)
CMYK
cmyk(0%, 100%, 100%, 62%)
Oklch
oklch(30.7% 0.126 29.2)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECDDCA
CBD9EC

Analogous

ECCDCB
ECDDCA
EAECCB

Triadic

ECDDCA
CBECDE
DECBEC

Split-Comp.

ECDDCA
CBEAEC
CDCBEC

Tetradic

ECDDCA
CBECCD
CBD9EC
ECCBEA

Contrast Matrix WCAG 2.1 Contrast

ECDDCA
836E5B
48321D
332412
600000
—
3.6
AA Large
9.0
AAA
11.2
AAA
10.5
AAA
3.6
AA Large
—
2.5
Fail
3.1
AA Large
2.9
Fail
9.0
AAA
2.5
Fail
—
1.2
Fail
1.2
Fail
11.2
AAA
3.1
AA Large
1.2
Fail
—
1.1
Fail
10.5
AAA
2.9
Fail
1.2
Fail
1.1
Fail
—
White BG
1.3Fail
4.8AA
12.0AAA
15.0AAA
14.0AAA
Black BG
15.8AAA
4.3AA Large
1.7Fail
1.4Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E5CF
7A7A60
3E3E22
2D2C16
363600

Deuteranopia

E6E8D0
7B7D61
404123
2D2E17
3C4300

Tritanopia

EBD2D3
826364
472627
321A1B
5B0000

Achromatopsia

DFDFDF
727272
363636
262626
1D1D1D

Shades & Tints Shades & Tints

#ECDDCA

Dark
Light

#836E5B

Dark
Light

#48321D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecddca;
  --color-2: #836e5b;
  --color-3: #48321d;
  --color-4: #332412;
  --color-5: #600000;
}

SCSS

$color-1: #ecddca;
$color-2: #836e5b;
$color-3: #48321d;
$color-4: #332412;
$color-5: #600000;

TAILWIND

colors: {
  'brand-1': '#ecddca',
  'brand-2': '#836e5b',
  'brand-3': '#48321d',
  'brand-4': '#332412',
  'brand-5': '#600000',
}

RGB Array

[236, 221, 202], [131, 110, 91], [72, 50, 29], [51, 36, 18], [96, 0, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #ECDDCA, #836E5B, #48321D, #332412, #600000 is ideal for: tech websites, dark mode UIs, game UIs, 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: #ecddca; --color-2: #836e5b; --color-3: #48321d; --color-4: #332412; --color-5: #600000. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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