← Back to Editor

#B4907A · #DADCD9 · #EDA211 · #F47C0C · #764D2F

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

#B4907A

Tangerine · Tan · Warm Sun

HEX
#B4907A
RGB
rgb(180, 144, 122)
HSL
hsl(23, 28%, 59%)
HSB
hsb(23, 32%, 71%)
CMYK
cmyk(0%, 20%, 32%, 29%)
Oklch
oklch(68.1% 0.054 53.0)

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

#DADCD9

Plain White · LightGray · Cloud White

HEX
#DADCD9
RGB
rgb(218, 220, 217)
HSL
hsl(100, 4%, 86%)
HSB
hsb(100, 1%, 86%)
CMYK
cmyk(1%, 0%, 1%, 14%)
Oklch
oklch(89.2% 0.005 134.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#EDA211

Ochre · GoldenRod · Honey Gold

HEX
#EDA211
RGB
rgb(237, 162, 17)
HSL
hsl(40, 87%, 50%)
HSB
hsb(40, 93%, 93%)
CMYK
cmyk(0%, 32%, 93%, 7%)
Oklch
oklch(76.7% 0.159 75.0)

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

#F47C0C

Tangerine · Chocolate · Amber Brown

HEX
#F47C0C
RGB
rgb(244, 124, 12)
HSL
hsl(29, 91%, 50%)
HSB
hsb(29, 95%, 96%)
CMYK
cmyk(0%, 49%, 95%, 4%)
Oklch
oklch(71.1% 0.177 53.2)

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

#764D2F

Tangerine · Sienna · Amber Brown

HEX
#764D2F
RGB
rgb(118, 77, 47)
HSL
hsl(25, 43%, 32%)
HSB
hsb(25, 60%, 46%)
CMYK
cmyk(0%, 35%, 60%, 54%)
Oklch
oklch(45.9% 0.071 56.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4907A
799DB4

Analogous

B47980
B4907A
B4AD79

Triadic

B4907A
79B490
9079B4

Split-Comp.

B4907A
79B4AD
7980B4

Tetradic

B4907A
80B479
799DB4
AD79B4

Contrast Matrix WCAG 2.1 Contrast

B4907A
DADCD9
EDA211
F47C0C
764D2F
—
2.1
Fail
1.4
Fail
1.1
Fail
2.5
Fail
2.1
Fail
—
1.6
Fail
2.0
Fail
5.3
AA
1.4
Fail
1.6
Fail
—
1.3
Fail
3.4
AA Large
1.1
Fail
2.0
Fail
1.3
Fail
—
2.7
Fail
2.5
Fail
5.3
AA
3.4
AA Large
2.7
Fail
—
White BG
2.9Fail
1.4Fail
2.1Fail
2.7Fail
7.3AAA
Black BG
7.2AAA
15.2AAA
9.8AAA
7.7AAA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A47F
DBDBDA
CDCC34
C0BF27
646436

Deuteranopia

A7A981
DBDBDA
D1D63D
C7D02E
676A38

Tritanopia

B28484
DADADA
E95056
EE3C41
743C3D

Achromatopsia

989898
DBDBDB
A8A8A8
939393
565656

Shades & Tints Shades & Tints

#B4907A

Dark
Light

#DADCD9

Dark
Light

#EDA211

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4907a;
  --color-2: #dadcd9;
  --color-3: #eda211;
  --color-4: #f47c0c;
  --color-5: #764d2f;
}

SCSS

$color-1: #b4907a;
$color-2: #dadcd9;
$color-3: #eda211;
$color-4: #f47c0c;
$color-5: #764d2f;

TAILWIND

colors: {
  'brand-1': '#b4907a',
  'brand-2': '#dadcd9',
  'brand-3': '#eda211',
  'brand-4': '#f47c0c',
  'brand-5': '#764d2f',
}

RGB Array

[180, 144, 122], [218, 220, 217], [237, 162, 17], [244, 124, 12], [118, 77, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #B4907A, #DADCD9, #EDA211, #F47C0C, #764D2F 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: #b4907a; --color-2: #dadcd9; --color-3: #eda211; --color-4: #f47c0c; --color-5: #764d2f. 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