← Back to Editor

#B19B74 · #CCAE7A · #E6CFA5 · #B10400 · #423602

coffee

A 5-color coffee palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#B19B74

Ginger · Tan · Warm Sun

HEX
#B19B74
RGB
rgb(177, 155, 116)
HSL
hsl(38, 28%, 57%)
HSB
hsb(38, 34%, 69%)
CMYK
cmyk(0%, 12%, 34%, 31%)
Oklch
oklch(69.9% 0.059 81.7)

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

#CCAE7A

Ginger · Tan · Warm Sun

HEX
#CCAE7A
RGB
rgb(204, 174, 122)
HSL
hsl(38, 45%, 64%)
HSB
hsb(38, 40%, 80%)
CMYK
cmyk(0%, 15%, 40%, 20%)
Oklch
oklch(76.5% 0.077 80.9)

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

#E6CFA5

Goose Yellow · Wheat · Peach Orange

HEX
#E6CFA5
RGB
rgb(230, 207, 165)
HSL
hsl(39, 57%, 77%)
HSB
hsb(39, 28%, 90%)
CMYK
cmyk(0%, 10%, 28%, 10%)
Oklch
oklch(86.3% 0.061 82.5)

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

#B10400

Vermilion · DarkRed · Wine Red

HEX
#B10400
RGB
rgb(177, 4, 0)
HSL
hsl(1, 100%, 35%)
HSB
hsb(1, 100%, 69%)
CMYK
cmyk(0%, 98%, 100%, 31%)
Oklch
oklch(47.9% 0.195 29.5)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#423602

Ochre · DarkOliveGreen · Amber Gold

HEX
#423602
RGB
rgb(66, 54, 2)
HSL
hsl(49, 94%, 13%)
HSB
hsb(49, 97%, 26%)
CMYK
cmyk(0%, 18%, 97%, 74%)
Oklch
oklch(33.6% 0.067 94.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B19B74
7389B0

Analogous

B07B73
B19B74
A8B073

Triadic

B19B74
73B09A
9A73B0

Split-Comp.

B19B74
73A8B0
7B73B0

Tetradic

B19B74
73B07B
7389B0
B073A8

Contrast Matrix WCAG 2.1 Contrast

B19B74
CCAE7A
E6CFA5
B10400
423602
—
1.3
Fail
1.8
Fail
2.7
Fail
4.4
AA Large
1.3
Fail
—
1.4
Fail
3.4
AA Large
5.6
AA
1.8
Fail
1.4
Fail
—
4.8
AA
7.9
AAA
2.7
Fail
3.4
AA Large
4.8
AA
—
1.6
Fail
4.4
AA Large
5.6
AA
7.9
AAA
1.6
Fail
—
White BG
2.7Fail
2.1Fail
1.5Fail
7.3AAA
11.9AAA
Black BG
7.8AAA
9.9AAA
13.8AAA
2.9Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A77D
BFBF87
DCDCAF
666501
3D3D0F

Deuteranopia

A9AA80
C1C38A
DDDFB2
707D01
3E3E12

Tritanopia

B08587
CA9193
E5B7B9
A80202
41191B

Achromatopsia

9D9D9D
B1B1B1
D1D1D1
373737
343434

Shades & Tints Shades & Tints

#B19B74

Dark
Light

#CCAE7A

Dark
Light

#E6CFA5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b19b74;
  --color-2: #ccae7a;
  --color-3: #e6cfa5;
  --color-4: #b10400;
  --color-5: #423602;
}

SCSS

$color-1: #b19b74;
$color-2: #ccae7a;
$color-3: #e6cfa5;
$color-4: #b10400;
$color-5: #423602;

TAILWIND

colors: {
  'brand-1': '#b19b74',
  'brand-2': '#ccae7a',
  'brand-3': '#e6cfa5',
  'brand-4': '#b10400',
  'brand-5': '#423602',
}

RGB Array

[177, 155, 116], [204, 174, 122], [230, 207, 165], [177, 4, 0], [66, 54, 2]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #B19B74, #CCAE7A, #E6CFA5, #B10400, #423602 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b19b74; --color-2: #ccae7a; --color-3: #e6cfa5; --color-4: #b10400; --color-5: #423602. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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