← Back to Editor

#4D351D · #8B6E46 · #B99768 · #CCB697 · #E2CDB0

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

#4D351D

Ochre · DarkOliveGreen · Cinnamon

HEX
#4D351D
RGB
rgb(77, 53, 29)
HSL
hsl(30, 45%, 21%)
HSB
hsb(30, 62%, 30%)
CMYK
cmyk(0%, 31%, 62%, 70%)
Oklch
oklch(35.1% 0.051 64.9)

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

#8B6E46

Ochre · Sienna · Amber Brown

HEX
#8B6E46
RGB
rgb(139, 110, 70)
HSL
hsl(35, 33%, 41%)
HSB
hsb(35, 50%, 55%)
CMYK
cmyk(0%, 21%, 50%, 45%)
Oklch
oklch(55.7% 0.067 74.6)

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

#B99768

Ginger · DarkSalmon · Warm Sun

HEX
#B99768
RGB
rgb(185, 151, 104)
HSL
hsl(35, 37%, 57%)
HSB
hsb(35, 44%, 73%)
CMYK
cmyk(0%, 18%, 44%, 27%)
Oklch
oklch(69.7% 0.075 75.0)

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

#CCB697

Ginger · Tan · Warm Sun

HEX
#CCB697
RGB
rgb(204, 182, 151)
HSL
hsl(35, 34%, 70%)
HSB
hsb(35, 26%, 80%)
CMYK
cmyk(0%, 11%, 26%, 20%)
Oklch
oklch(78.7% 0.049 76.3)

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

#E2CDB0

Goose Yellow · Wheat · Peach Orange

HEX
#E2CDB0
RGB
rgb(226, 205, 176)
HSL
hsl(35, 46%, 79%)
HSB
hsb(35, 22%, 89%)
CMYK
cmyk(0%, 9%, 22%, 11%)
Oklch
oklch(85.8% 0.045 75.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D351D
1D364E

Analogous

4E1D1D
4D351D
4E4E1D

Triadic

4D351D
1D4E36
361D4E

Split-Comp.

4D351D
1D4E4E
1D1D4E

Tetradic

4D351D
1D4E1D
1D364E
4E1D4E

Contrast Matrix WCAG 2.1 Contrast

4D351D
8B6E46
B99768
CCB697
E2CDB0
—
2.4
Fail
4.2
AA Large
5.8
AA
7.4
AAA
2.4
Fail
—
1.7
Fail
2.4
Fail
3.1
AA Large
4.2
AA Large
1.7
Fail
—
1.4
Fail
1.8
Fail
5.8
AA
2.4
Fail
1.4
Fail
—
1.3
Fail
7.4
AAA
3.1
AA Large
1.8
Fail
1.3
Fail
—
White BG
11.4AAA
4.8AA
2.7Fail
2.0Fail
1.5Fail
Black BG
1.8Fail
4.4AA Large
7.7AAA
10.7AAA
13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

434223
7E7E50
AAAA73
C2C29F
D9D9B7

Deuteranopia

444624
808252
ACAF76
C4C5A0
DADCB9

Tritanopia

4C2728
8A5759
B77C7E
CBA4A6
E1BDBE

Achromatopsia

393939
727272
9C9C9C
B9B9B9
D0D0D0

Shades & Tints Shades & Tints

#4D351D

Dark
Light

#8B6E46

Dark
Light

#B99768

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d351d;
  --color-2: #8b6e46;
  --color-3: #b99768;
  --color-4: #ccb697;
  --color-5: #e2cdb0;
}

SCSS

$color-1: #4d351d;
$color-2: #8b6e46;
$color-3: #b99768;
$color-4: #ccb697;
$color-5: #e2cdb0;

TAILWIND

colors: {
  'brand-1': '#4d351d',
  'brand-2': '#8b6e46',
  'brand-3': '#b99768',
  'brand-4': '#ccb697',
  'brand-5': '#e2cdb0',
}

RGB Array

[77, 53, 29], [139, 110, 70], [185, 151, 104], [204, 182, 151], [226, 205, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #4D351D, #8B6E46, #B99768, #CCB697, #E2CDB0 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: #4d351d; --color-2: #8b6e46; --color-3: #b99768; --color-4: #ccb697; --color-5: #e2cdb0. 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