← Back to Editor

#D6C88C · #B88B63 · #916D56 · #181303 · #5E1022

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

#D6C88C

Ginger · BurlyWood · Sunflower

HEX
#D6C88C
RGB
rgb(214, 200, 140)
HSL
hsl(49, 47%, 69%)
HSB
hsb(49, 35%, 84%)
CMYK
cmyk(0%, 7%, 35%, 16%)
Oklch
oklch(83.0% 0.080 96.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#B88B63

Tangerine · DarkSalmon · Warm Sun

HEX
#B88B63
RGB
rgb(184, 139, 99)
HSL
hsl(28, 37%, 55%)
HSB
hsb(28, 46%, 72%)
CMYK
cmyk(0%, 24%, 46%, 28%)
Oklch
oklch(67.1% 0.078 62.5)

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

#916D56

Tangerine · DimGray · Amber Brown

HEX
#916D56
RGB
rgb(145, 109, 86)
HSL
hsl(23, 26%, 45%)
HSB
hsb(23, 41%, 57%)
CMYK
cmyk(0%, 25%, 41%, 43%)
Oklch
oklch(56.5% 0.057 53.8)

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

#181303

Ochre · Black · Amber Gold

HEX
#181303
RGB
rgb(24, 19, 3)
HSL
hsl(46, 78%, 5%)
HSB
hsb(46, 88%, 9%)
CMYK
cmyk(0%, 21%, 88%, 91%)
Oklch
oklch(18.8% 0.032 93.9)

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

#5E1022

Vermilion · Maroon · Wine Red

HEX
#5E1022
RGB
rgb(94, 16, 34)
HSL
hsl(346, 71%, 22%)
HSB
hsb(346, 83%, 37%)
CMYK
cmyk(0%, 83%, 64%, 63%)
Oklch
oklch(32.0% 0.110 13.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D6C88C
8B98D5

Analogous

D5A28B
D6C88C
BED58B

Triadic

D6C88C
8BD5C7
C78BD5

Split-Comp.

D6C88C
8BBED5
A28BD5

Tetradic

D6C88C
8BD5A2
8B98D5
D58BBE

Contrast Matrix WCAG 2.1 Contrast

D6C88C
B88B63
916D56
181303
5E1022
—
1.8
Fail
2.8
Fail
11.0
AAA
7.9
AAA
1.8
Fail
—
1.5
Fail
6.1
AA
4.4
AA Large
2.8
Fail
1.5
Fail
—
4.0
AA Large
2.9
Fail
11.0
AAA
6.1
AA
4.0
AA Large
—
1.4
Fail
7.9
AAA
4.4
AA Large
2.9
Fail
1.4
Fail
—
White BG
1.7Fail
3.0AA Large
4.6AA
18.5AAA
13.3AAA
Black BG
12.5AAA
6.9AA
4.5AA
1.1Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D09B
A5A46D
81815C
161607
3C3C1E

Deuteranopia

D1D29E
A7AA6F
84865D
161608
41471D

Tritanopia

D5A6A9
B67476
8F6061
180A0B
5A1A19

Achromatopsia

C5C5C5
949494
757575
131313
292929

Shades & Tints Shades & Tints

#D6C88C

Dark
Light

#B88B63

Dark
Light

#916D56

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d6c88c;
  --color-2: #b88b63;
  --color-3: #916d56;
  --color-4: #181303;
  --color-5: #5e1022;
}

SCSS

$color-1: #d6c88c;
$color-2: #b88b63;
$color-3: #916d56;
$color-4: #181303;
$color-5: #5e1022;

TAILWIND

colors: {
  'brand-1': '#d6c88c',
  'brand-2': '#b88b63',
  'brand-3': '#916d56',
  'brand-4': '#181303',
  'brand-5': '#5e1022',
}

RGB Array

[214, 200, 140], [184, 139, 99], [145, 109, 86], [24, 19, 3], [94, 16, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #D6C88C, #B88B63, #916D56, #181303, #5E1022 is ideal for: tech websites, dark mode UIs, game UIs, 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: #d6c88c; --color-2: #b88b63; --color-3: #916d56; --color-4: #181303; --color-5: #5e1022. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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