← Back to Editor

#39231F · #D0DABC · #D09D45 · #C54A33 · #C43149

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

#39231F

Crimson · DarkSlateGray · Deep Berry

HEX
#39231F
RGB
rgb(57, 35, 31)
HSL
hsl(9, 30%, 17%)
HSB
hsb(9, 46%, 22%)
CMYK
cmyk(0%, 39%, 46%, 78%)
Oklch
oklch(28.3% 0.035 30.7)

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

#D0DABC

Willow Green · LightGray · Apple Green

HEX
#D0DABC
RGB
rgb(208, 218, 188)
HSL
hsl(80, 29%, 80%)
HSB
hsb(80, 14%, 85%)
CMYK
cmyk(5%, 0%, 14%, 15%)
Oklch
oklch(87.3% 0.042 122.3)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D09D45

Ginger · GoldenRod · Warm Sun

HEX
#D09D45
RGB
rgb(208, 157, 69)
HSL
hsl(38, 60%, 54%)
HSB
hsb(38, 67%, 82%)
CMYK
cmyk(0%, 25%, 67%, 18%)
Oklch
oklch(72.8% 0.121 78.4)

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

#C54A33

Crimson · Sienna · Passion Red

HEX
#C54A33
RGB
rgb(197, 74, 51)
HSL
hsl(9, 59%, 49%)
HSB
hsb(9, 74%, 77%)
CMYK
cmyk(0%, 62%, 74%, 23%)
Oklch
oklch(57.2% 0.162 32.6)

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

#C43149

Crimson · Crimson · Passion Red

HEX
#C43149
RGB
rgb(196, 49, 73)
HSL
hsl(350, 60%, 48%)
HSB
hsb(350, 75%, 77%)
CMYK
cmyk(0%, 75%, 63%, 23%)
Oklch
oklch(54.7% 0.182 16.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

39231F
1E3438

Analogous

381E27
39231F
382F1E

Triadic

39231F
1E3822
221E38

Split-Comp.

39231F
1E382F
1E2738

Tetradic

39231F
27381E
1E3438
2F1E38

Contrast Matrix WCAG 2.1 Contrast

39231F
D0DABC
D09D45
C54A33
C43149
—
10.1
AAA
6.0
AA
3.1
AA Large
2.7
Fail
10.1
AAA
—
1.7
Fail
3.3
AA Large
3.7
AA Large
6.0
AA
1.7
Fail
—
2.0
Fail
2.2
Fail
3.1
AA Large
3.3
AA Large
2.0
Fail
—
1.1
Fail
2.7
Fail
3.7
AA Large
2.2
Fail
1.1
Fail
—
White BG
14.6AAA
1.5Fail
2.4Fail
4.8AA
5.4AA
Black BG
1.4Fail
14.4AAA
8.6AAA
4.4AA Large
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F20
D4D4C3
BAB95A
908F39
848343

Deuteranopia

313220
D4D3C5
BDC15F
97A03A
8D9842

Tritanopia

382121
D1C9CA
CD6B6F
BF3D3E
BD3F3E

Achromatopsia

292929
D4D4D4
A2A2A2
6C6C6C
606060

Shades & Tints Shades & Tints

#39231F

Dark
Light

#D0DABC

Dark
Light

#D09D45

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #39231f;
  --color-2: #d0dabc;
  --color-3: #d09d45;
  --color-4: #c54a33;
  --color-5: #c43149;
}

SCSS

$color-1: #39231f;
$color-2: #d0dabc;
$color-3: #d09d45;
$color-4: #c54a33;
$color-5: #c43149;

TAILWIND

colors: {
  'brand-1': '#39231f',
  'brand-2': '#d0dabc',
  'brand-3': '#d09d45',
  'brand-4': '#c54a33',
  'brand-5': '#c43149',
}

RGB Array

[57, 35, 31], [208, 218, 188], [208, 157, 69], [197, 74, 51], [196, 49, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #39231F, #D0DABC, #D09D45, #C54A33, #C43149 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: #39231f; --color-2: #d0dabc; --color-3: #d09d45; --color-4: #c54a33; --color-5: #c43149. 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