← Back to Editor

#D1CDCA · #550000 · #2F2019 · #C1A178 · #907E2C

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

#D1CDCA

Silver Gray · LightGray · Pearl Gray

HEX
#D1CDCA
RGB
rgb(209, 205, 202)
HSL
hsl(26, 7%, 81%)
HSB
hsb(26, 3%, 82%)
CMYK
cmyk(0%, 2%, 3%, 18%)
Oklch
oklch(85.1% 0.006 59.6)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#550000

Vermilion · Maroon · Deep Berry

HEX
#550000
RGB
rgb(85, 0, 0)
HSL
hsl(0, 100%, 17%)
HSB
hsb(0, 100%, 33%)
CMYK
cmyk(0%, 100%, 100%, 67%)
Oklch
oklch(28.2% 0.116 29.2)

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

#2F2019

Tangerine · Black · Cinnamon

HEX
#2F2019
RGB
rgb(47, 32, 25)
HSL
hsl(19, 31%, 14%)
HSB
hsb(19, 47%, 18%)
CMYK
cmyk(0%, 32%, 47%, 82%)
Oklch
oklch(26.0% 0.027 46.1)

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

#C1A178

Ginger · Tan · Warm Sun

HEX
#C1A178
RGB
rgb(193, 161, 120)
HSL
hsl(34, 37%, 61%)
HSB
hsb(34, 38%, 76%)
CMYK
cmyk(0%, 17%, 38%, 24%)
Oklch
oklch(72.8% 0.067 73.3)

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

#907E2C

Ochre · Sienna · Honey Gold

HEX
#907E2C
RGB
rgb(144, 126, 44)
HSL
hsl(49, 53%, 37%)
HSB
hsb(49, 69%, 56%)
CMYK
cmyk(0%, 12%, 69%, 44%)
Oklch
oklch(59.4% 0.103 96.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1CDCA
CBCFD2

Analogous

D2CBCC
D1CDCA
D2D1CB

Triadic

D1CDCA
CBD2CE
CECBD2

Split-Comp.

D1CDCA
CBD2D1
CBCCD2

Tetradic

D1CDCA
CCD2CB
CBCFD2
D1CBD2

Contrast Matrix WCAG 2.1 Contrast

D1CDCA
550000
2F2019
C1A178
907E2C
—
9.6
AAA
9.9
AAA
1.5
Fail
2.6
Fail
9.6
AAA
—
1.0
Fail
6.2
AA
3.8
AA Large
9.9
AAA
1.0
Fail
—
6.4
AA
3.9
AA Large
1.5
Fail
6.2
AA
6.4
AA
—
1.7
Fail
2.6
Fail
3.8
AA Large
3.9
AA Large
1.7
Fail
—
White BG
1.6Fail
15.1AAA
15.7AAA
2.4Fail
4.0AA Large
Black BG
13.3AAA
1.4Fail
1.3Fail
8.6AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCFCB
302F00
29281B
B3B382
888840

Deuteranopia

D0D0CB
353B00
292B1B
B5B784
898B45

Tritanopia

D1CBCB
510000
2E1C1C
BF8A8B
8F5053

Achromatopsia

CECECE
191919
242424
A6A6A6
7A7A7A

Shades & Tints Shades & Tints

#D1CDCA

Dark
Light

#550000

Dark
Light

#2F2019

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1cdca;
  --color-2: #550000;
  --color-3: #2f2019;
  --color-4: #c1a178;
  --color-5: #907e2c;
}

SCSS

$color-1: #d1cdca;
$color-2: #550000;
$color-3: #2f2019;
$color-4: #c1a178;
$color-5: #907e2c;

TAILWIND

colors: {
  'brand-1': '#d1cdca',
  'brand-2': '#550000',
  'brand-3': '#2f2019',
  'brand-4': '#c1a178',
  'brand-5': '#907e2c',
}

RGB Array

[209, 205, 202], [85, 0, 0], [47, 32, 25], [193, 161, 120], [144, 126, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #D1CDCA, #550000, #2F2019, #C1A178, #907E2C 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: #d1cdca; --color-2: #550000; --color-3: #2f2019; --color-4: #c1a178; --color-5: #907e2c. 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