← Back to Editor

#9BBEC0 · #2F0708 · #D9B289 · #EACEA7 · #FFE6CE

coffee

A 5-color coffee palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#9BBEC0

Sky Blue · DarkGray · Lake Green

HEX
#9BBEC0
RGB
rgb(155, 190, 192)
HSL
hsl(183, 23%, 68%)
HSB
hsb(183, 19%, 75%)
CMYK
cmyk(19%, 1%, 0%, 25%)
Oklch
oklch(77.7% 0.038 200.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#2F0708

Vermilion · Black · Deep Berry

HEX
#2F0708
RGB
rgb(47, 7, 8)
HSL
hsl(358, 74%, 11%)
HSB
hsb(358, 85%, 18%)
CMYK
cmyk(0%, 85%, 83%, 82%)
Oklch
oklch(20.6% 0.065 23.5)

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

#D9B289

Ginger · Tan · Warm Sun

HEX
#D9B289
RGB
rgb(217, 178, 137)
HSL
hsl(31, 51%, 69%)
HSB
hsb(31, 37%, 85%)
CMYK
cmyk(0%, 18%, 37%, 15%)
Oklch
oklch(78.8% 0.071 67.9)

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

#EACEA7

Goose Yellow · Wheat · Peach Orange

HEX
#EACEA7
RGB
rgb(234, 206, 167)
HSL
hsl(35, 61%, 79%)
HSB
hsb(35, 29%, 92%)
CMYK
cmyk(0%, 12%, 29%, 8%)
Oklch
oklch(86.5% 0.060 75.9)

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

#FFE6CE

Apricot · Bisque · Peach Orange

HEX
#FFE6CE
RGB
rgb(255, 230, 206)
HSL
hsl(29, 100%, 90%)
HSB
hsb(29, 19%, 100%)
CMYK
cmyk(0%, 10%, 19%, 0%)
Oklch
oklch(93.9% 0.042 66.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BBEC0
C09D9B

Analogous

9BC0AF
9BBEC0
9BACC0

Triadic

9BBEC0
C09BBE
BEC09B

Split-Comp.

9BBEC0
C09BAC
C0AF9B

Tetradic

9BBEC0
AF9BC0
C09D9B
ACC09B

Contrast Matrix WCAG 2.1 Contrast

9BBEC0
2F0708
D9B289
EACEA7
FFE6CE
—
9.1
AAA
1.0
Fail
1.3
Fail
1.7
Fail
9.1
AAA
—
9.2
AAA
12.0
AAA
15.1
AAA
1.0
Fail
9.2
AAA
—
1.3
Fail
1.6
Fail
1.3
Fail
12.0
AAA
1.3
Fail
—
1.3
Fail
1.7
Fail
15.1
AAA
1.6
Fail
1.3
Fail
—
White BG
2.0Fail
18.2AAA
2.0Fail
1.5Fail
1.2Fail
Black BG
10.5AAA
1.2Fail
10.7AAA
13.9AAA
17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAAAC0
1E1D08
C8C893
DEDEB0
F4F4D4

Deuteranopia

A8A6BF
202308
CACD95
E0E2B3
F6F8D5

Tritanopia

9DBFBF
2D0808
D79B9C
E9B8BA
FED8D9

Achromatopsia

B4B4B4
131313
B9B9B9
D2D2D2
EBEBEB

Shades & Tints Shades & Tints

#9BBEC0

Dark
Light

#2F0708

Dark
Light

#D9B289

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9bbec0;
  --color-2: #2f0708;
  --color-3: #d9b289;
  --color-4: #eacea7;
  --color-5: #ffe6ce;
}

SCSS

$color-1: #9bbec0;
$color-2: #2f0708;
$color-3: #d9b289;
$color-4: #eacea7;
$color-5: #ffe6ce;

TAILWIND

colors: {
  'brand-1': '#9bbec0',
  'brand-2': '#2f0708',
  'brand-3': '#d9b289',
  'brand-4': '#eacea7',
  'brand-5': '#ffe6ce',
}

RGB Array

[155, 190, 192], [47, 7, 8], [217, 178, 137], [234, 206, 167], [255, 230, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #9BBEC0, #2F0708, #D9B289, #EACEA7, #FFE6CE 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: #9bbec0; --color-2: #2f0708; --color-3: #d9b289; --color-4: #eacea7; --color-5: #ffe6ce. 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