← Back to Editor

#D45656 · #DF7B72 · #F5D3A0 · #B6A389 · #8A685F

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 Library

Color Details Color Details

#D45656

Crimson · Tomato · Passion Red

HEX
#D45656
RGB
rgb(212, 86, 86)
HSL
hsl(0, 59%, 58%)
HSB
hsb(0, 59%, 83%)
CMYK
cmyk(0%, 59%, 59%, 17%)
Oklch
oklch(61.7% 0.160 23.0)

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

#DF7B72

Peach Pink · LightCoral · Coral Red

HEX
#DF7B72
RGB
rgb(223, 123, 114)
HSL
hsl(5, 63%, 66%)
HSB
hsb(5, 49%, 87%)
CMYK
cmyk(0%, 45%, 49%, 13%)
Oklch
oklch(69.2% 0.126 26.2)

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

#F5D3A0

Goose Yellow · Wheat · Peach Orange

HEX
#F5D3A0
RGB
rgb(245, 211, 160)
HSL
hsl(36, 81%, 79%)
HSB
hsb(36, 35%, 96%)
CMYK
cmyk(0%, 14%, 35%, 4%)
Oklch
oklch(88.4% 0.076 77.6)

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

#B6A389

Ginger · Tan · Warm Sun

HEX
#B6A389
RGB
rgb(182, 163, 137)
HSL
hsl(35, 24%, 63%)
HSB
hsb(35, 25%, 71%)
CMYK
cmyk(0%, 10%, 25%, 29%)
Oklch
oklch(72.5% 0.042 75.6)

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

#8A685F

Crimson · DimGray · Passion Red

HEX
#8A685F
RGB
rgb(138, 104, 95)
HSL
hsl(13, 18%, 46%)
HSB
hsb(13, 31%, 54%)
CMYK
cmyk(0%, 25%, 31%, 46%)
Oklch
oklch(54.9% 0.046 35.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D45656
55D3D3

Analogous

D35594
D45656
D39455

Triadic

D45656
55D355
5555D3

Split-Comp.

D45656
55D394
5594D3

Tetradic

D45656
94D355
55D3D3
9455D3

Contrast Matrix WCAG 2.1 Contrast

D45656
DF7B72
F5D3A0
B6A389
8A685F
—
1.4
Fail
2.8
Fail
1.6
Fail
1.2
Fail
1.4
Fail
—
2.0
Fail
1.2
Fail
1.7
Fail
2.8
Fail
2.0
Fail
—
1.7
Fail
3.5
AA Large
1.6
Fail
1.2
Fail
1.7
Fail
—
2.0
Fail
1.2
Fail
1.7
Fail
3.5
AA Large
2.0
Fail
—
White BG
4.0AA Large
2.9Fail
1.4Fail
2.4Fail
5.0AA
Black BG
5.3AA
7.2AAA
14.7AAA
8.6AAA
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9C56
B4B374
E6E6AC
AEAE8F
7B7B61

Deuteranopia

A5AE56
BAC175
E8EBAF
AFB091
7D8062

Tritanopia

CE5656
DA7676
F3B6B8
B59495
886363

Achromatopsia

7C7C7C
989898
D7D7D7
A6A6A6
717171

Shades & Tints Shades & Tints

#D45656

Dark
Light

#DF7B72

Dark
Light

#F5D3A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d45656;
  --color-2: #df7b72;
  --color-3: #f5d3a0;
  --color-4: #b6a389;
  --color-5: #8a685f;
}

SCSS

$color-1: #d45656;
$color-2: #df7b72;
$color-3: #f5d3a0;
$color-4: #b6a389;
$color-5: #8a685f;

TAILWIND

colors: {
  'brand-1': '#d45656',
  'brand-2': '#df7b72',
  'brand-3': '#f5d3a0',
  'brand-4': '#b6a389',
  'brand-5': '#8a685f',
}

RGB Array

[212, 86, 86], [223, 123, 114], [245, 211, 160], [182, 163, 137], [138, 104, 95]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #D45656, #DF7B72, #F5D3A0, #B6A389, #8A685F is ideal for: corporate websites, product showcases, portfolios. 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: #d45656; --color-2: #df7b72; --color-3: #f5d3a0; --color-4: #b6a389; --color-5: #8a685f. 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. 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