← Back to Editor

#FFD1BA · #D8C396 · #2D1500 · #C74428 · #E44944

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

#FFD1BA

Apricot · Wheat · Peach Orange

HEX
#FFD1BA
RGB
rgb(255, 209, 186)
HSL
hsl(20, 100%, 86%)
HSB
hsb(20, 27%, 100%)
CMYK
cmyk(0%, 18%, 27%, 0%)
Oklch
oklch(89.4% 0.061 48.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D8C396

Goose Yellow · Tan · Sunflower

HEX
#D8C396
RGB
rgb(216, 195, 150)
HSL
hsl(41, 46%, 72%)
HSB
hsb(41, 31%, 85%)
CMYK
cmyk(0%, 10%, 31%, 15%)
Oklch
oklch(82.4% 0.064 85.8)

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

#2D1500

Tangerine · Black · Cinnamon

HEX
#2D1500
RGB
rgb(45, 21, 0)
HSL
hsl(28, 100%, 9%)
HSB
hsb(28, 100%, 18%)
CMYK
cmyk(0%, 53%, 100%, 82%)
Oklch
oklch(22.6% 0.052 60.9)

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

#C74428

Vermilion · Chocolate · Passion Red

HEX
#C74428
RGB
rgb(199, 68, 40)
HSL
hsl(11, 67%, 47%)
HSB
hsb(11, 80%, 78%)
CMYK
cmyk(0%, 66%, 80%, 22%)
Oklch
oklch(56.7% 0.172 33.7)

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

#E44944

Vermilion · Tomato · Passion Red

HEX
#E44944
RGB
rgb(228, 73, 68)
HSL
hsl(2, 75%, 58%)
HSB
hsb(2, 70%, 89%)
CMYK
cmyk(0%, 68%, 70%, 11%)
Oklch
oklch(62.4% 0.192 26.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFD1BA
B8E7FF

Analogous

FFB8C4
FFD1BA
FFF3B8

Triadic

FFD1BA
B8FFCF
CFB8FF

Split-Comp.

FFD1BA
B8FFF3
B8C3FF

Tetradic

FFD1BA
C3FFB8
B8E7FF
F3B8FF

Contrast Matrix WCAG 2.1 Contrast

FFD1BA
D8C396
2D1500
C74428
E44944
—
1.2
Fail
12.4
AAA
3.5
AA Large
2.8
Fail
1.2
Fail
—
10.0
AAA
2.8
Fail
2.3
Fail
12.4
AAA
10.0
AAA
—
3.5
AA Large
4.4
AA Large
3.5
AA Large
2.8
Fail
3.5
AA Large
—
1.2
Fail
2.8
Fail
2.3
Fail
4.4
AA Large
1.2
Fail
—
White BG
1.4Fail
1.7Fail
17.2AAA
4.9AA
3.9AA Large
Black BG
15.1AAA
12.2AAA
1.2Fail
4.3AA Large
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBC0
CFCFA1
232205
8E8D2F
A19F45

Deuteranopia

EEF1C1
D0D2A4
242606
96A030
AAB646

Tritanopia

FDC4C5
D7A9AB
2C090A
C03435
DC4646

Achromatopsia

DCDCDC
C4C4C4
1A1A1A
686868
777777

Shades & Tints Shades & Tints

#FFD1BA

Dark
Light

#D8C396

Dark
Light

#2D1500

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffd1ba;
  --color-2: #d8c396;
  --color-3: #2d1500;
  --color-4: #c74428;
  --color-5: #e44944;
}

SCSS

$color-1: #ffd1ba;
$color-2: #d8c396;
$color-3: #2d1500;
$color-4: #c74428;
$color-5: #e44944;

TAILWIND

colors: {
  'brand-1': '#ffd1ba',
  'brand-2': '#d8c396',
  'brand-3': '#2d1500',
  'brand-4': '#c74428',
  'brand-5': '#e44944',
}

RGB Array

[255, 209, 186], [216, 195, 150], [45, 21, 0], [199, 68, 40], [228, 73, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #FFD1BA, #D8C396, #2D1500, #C74428, #E44944 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: #ffd1ba; --color-2: #d8c396; --color-3: #2d1500; --color-4: #c74428; --color-5: #e44944. 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