← Back to Editor

#D8BBBF · #2F1E1E · #50C763 · #62E262 · #85ED77

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

#D8BBBF

Peach Pink · Silver · Coral Red

HEX
#D8BBBF
RGB
rgb(216, 187, 191)
HSL
hsl(352, 27%, 79%)
HSB
hsb(352, 13%, 85%)
CMYK
cmyk(0%, 13%, 12%, 15%)
Oklch
oklch(81.8% 0.034 8.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#2F1E1E

Crimson · Black · Deep Berry

HEX
#2F1E1E
RGB
rgb(47, 30, 30)
HSL
hsl(0, 22%, 15%)
HSB
hsb(0, 36%, 18%)
CMYK
cmyk(0%, 36%, 36%, 82%)
Oklch
oklch(25.7% 0.027 19.1)

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

#50C763

Emerald · MediumSeaGreen · Olive Green

HEX
#50C763
RGB
rgb(80, 199, 99)
HSL
hsl(130, 52%, 55%)
HSB
hsb(130, 60%, 78%)
CMYK
cmyk(60%, 0%, 50%, 22%)
Oklch
oklch(73.9% 0.176 146.5)

Traditional「Emerald」· Paint「Olive Green」· Creative Blush Sunrise

#62E262

Emerald · MediumSeaGreen · Apple Green

HEX
#62E262
RGB
rgb(98, 226, 98)
HSL
hsl(120, 69%, 64%)
HSB
hsb(120, 57%, 89%)
CMYK
cmyk(57%, 0%, 57%, 11%)
Oklch
oklch(81.3% 0.204 143.4)

Traditional「Emerald」· Paint「Apple Green」· Creative Mint Breeze

#85ED77

Emerald · LightGreen · Apple Green

HEX
#85ED77
RGB
rgb(133, 237, 119)
HSL
hsl(113, 77%, 70%)
HSB
hsb(113, 50%, 93%)
CMYK
cmyk(44%, 0%, 50%, 7%)
Oklch
oklch(85.7% 0.184 141.4)

Traditional「Emerald」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8BBBF
BBD8D4

Analogous

D8BBCD
D8BBBF
D8C6BB

Triadic

D8BBBF
BFD8BB
BBBFD8

Split-Comp.

D8BBBF
BBD8C6
BBCDD8

Tetradic

D8BBBF
CDD8BB
BBD8D4
C6BBD8

Contrast Matrix WCAG 2.1 Contrast

D8BBBF
2F1E1E
50C763
62E262
85ED77
—
8.9
AAA
1.2
Fail
1.1
Fail
1.2
Fail
8.9
AAA
—
7.3
AAA
9.5
AAA
10.8
AAA
1.2
Fail
7.3
AAA
—
1.3
Fail
1.5
Fail
1.1
Fail
9.5
AAA
1.3
Fail
—
1.1
Fail
1.2
Fail
10.8
AAA
1.5
Fail
1.1
Fail
—
White BG
1.8Fail
15.8AAA
2.2Fail
1.7Fail
1.5Fail
Black BG
11.8AAA
1.3Fail
9.7AAA
12.6AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBBE
28271E
84857B
999B81
B2B394

Deuteranopia

CDCFBE
292A1E
7D7481
928888
ACA49A

Tritanopia

D7BDBD
2E1E1E
568E93
68999F
8AAAAF

Achromatopsia

C4C4C4
232323
989898
ADADAD
C0C0C0

Shades & Tints Shades & Tints

#D8BBBF

Dark
Light

#2F1E1E

Dark
Light

#50C763

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8bbbf;
  --color-2: #2f1e1e;
  --color-3: #50c763;
  --color-4: #62e262;
  --color-5: #85ed77;
}

SCSS

$color-1: #d8bbbf;
$color-2: #2f1e1e;
$color-3: #50c763;
$color-4: #62e262;
$color-5: #85ed77;

TAILWIND

colors: {
  'brand-1': '#d8bbbf',
  'brand-2': '#2f1e1e',
  'brand-3': '#50c763',
  'brand-4': '#62e262',
  'brand-5': '#85ed77',
}

RGB Array

[216, 187, 191], [47, 30, 30], [80, 199, 99], [98, 226, 98], [133, 237, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #D8BBBF, #2F1E1E, #50C763, #62E262, #85ED77 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: #d8bbbf; --color-2: #2f1e1e; --color-3: #50c763; --color-4: #62e262; --color-5: #85ed77. 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