← Back to Editor

#3C2B28 · #584944 · #C8C3B6 · #E4E2D4 · #EE5654

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

#3C2B28

Crimson · DarkSlateGray · Deep Berry

HEX
#3C2B28
RGB
rgb(60, 43, 40)
HSL
hsl(9, 20%, 20%)
HSB
hsb(9, 33%, 24%)
CMYK
cmyk(0%, 28%, 33%, 76%)
Oklch
oklch(30.8% 0.026 30.0)

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

#584944

Tangerine · DarkOliveGreen · Amber Brown

HEX
#584944
RGB
rgb(88, 73, 68)
HSL
hsl(15, 13%, 31%)
HSB
hsb(15, 23%, 35%)
CMYK
cmyk(0%, 17%, 23%, 65%)
Oklch
oklch(41.9% 0.022 39.3)

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

#C8C3B6

Goose Yellow · Silver · Sunflower

HEX
#C8C3B6
RGB
rgb(200, 195, 182)
HSL
hsl(43, 14%, 75%)
HSB
hsb(43, 9%, 78%)
CMYK
cmyk(0%, 3%, 9%, 22%)
Oklch
oklch(81.8% 0.019 89.4)

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

#E4E2D4

Fresh Green · LightGray · Lemon Cream

HEX
#E4E2D4
RGB
rgb(228, 226, 212)
HSL
hsl(52, 23%, 86%)
HSB
hsb(52, 7%, 89%)
CMYK
cmyk(0%, 1%, 7%, 11%)
Oklch
oklch(91.1% 0.019 100.1)

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

#EE5654

Peach Pink · Tomato · Coral Red

HEX
#EE5654
RGB
rgb(238, 86, 84)
HSL
hsl(1, 82%, 63%)
HSB
hsb(1, 65%, 93%)
CMYK
cmyk(0%, 64%, 65%, 7%)
Oklch
oklch(65.6% 0.188 24.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C2B28
293A3D

Analogous

3D2930
3C2B28
3D3629

Triadic

3C2B28
293D2C
2C293D

Split-Comp.

3C2B28
293D36
29303D

Tetradic

3C2B28
303D29
293A3D
36293D

Contrast Matrix WCAG 2.1 Contrast

3C2B28
584944
C8C3B6
E4E2D4
EE5654
—
1.6
Fail
7.6
AAA
10.3
AAA
3.9
AA Large
1.6
Fail
—
4.9
AA
6.6
AA
2.5
Fail
7.6
AAA
4.9
AA
—
1.4
Fail
2.0
Fail
10.3
AAA
6.6
AA
1.4
Fail
—
2.6
Fail
3.9
AA Large
2.5
Fail
2.0
Fail
2.6
Fail
—
White BG
13.4AAA
8.6AAA
1.8Fail
1.3Fail
3.4AA Large
Black BG
1.6Fail
2.5Fail
11.9AAA
16.1AAA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

353429
525145
C6C6B9
E3E3D7
ACAB54

Deuteranopia

363729
525446
C6C7BA
E3E3D8
B5C055

Tritanopia

3B2929
574646
C8BCBC
E4DADB
E65555

Achromatopsia

303030
4D4D4D
C3C3C3
E1E1E1
838383

Shades & Tints Shades & Tints

#3C2B28

Dark
Light

#584944

Dark
Light

#C8C3B6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c2b28;
  --color-2: #584944;
  --color-3: #c8c3b6;
  --color-4: #e4e2d4;
  --color-5: #ee5654;
}

SCSS

$color-1: #3c2b28;
$color-2: #584944;
$color-3: #c8c3b6;
$color-4: #e4e2d4;
$color-5: #ee5654;

TAILWIND

colors: {
  'brand-1': '#3c2b28',
  'brand-2': '#584944',
  'brand-3': '#c8c3b6',
  'brand-4': '#e4e2d4',
  'brand-5': '#ee5654',
}

RGB Array

[60, 43, 40], [88, 73, 68], [200, 195, 182], [228, 226, 212], [238, 86, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #3C2B28, #584944, #C8C3B6, #E4E2D4, #EE5654 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: #3c2b28; --color-2: #584944; --color-3: #c8c3b6; --color-4: #e4e2d4; --color-5: #ee5654. 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