← Back to Editor

#5E4431 · #9E6D4A · #EBD1B7 · #4F646B · #9EA9AD

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#5E4431

Tangerine · DarkOliveGreen · Amber Brown

HEX
#5E4431
RGB
rgb(94, 68, 49)
HSL
hsl(25, 31%, 28%)
HSB
hsb(25, 48%, 37%)
CMYK
cmyk(0%, 28%, 48%, 63%)
Oklch
oklch(41.0% 0.047 57.2)

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

#9E6D4A

Tangerine · Sienna · Amber Brown

HEX
#9E6D4A
RGB
rgb(158, 109, 74)
HSL
hsl(25, 36%, 45%)
HSB
hsb(25, 53%, 62%)
CMYK
cmyk(0%, 31%, 53%, 38%)
Oklch
oklch(57.8% 0.080 56.0)

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

#EBD1B7

Goose Yellow · Wheat · Peach Orange

HEX
#EBD1B7
RGB
rgb(235, 209, 183)
HSL
hsl(30, 57%, 82%)
HSB
hsb(30, 22%, 92%)
CMYK
cmyk(0%, 11%, 22%, 8%)
Oklch
oklch(87.6% 0.045 67.2)

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

#4F646B

Slate Blue · DimGray · Mint Ice

HEX
#4F646B
RGB
rgb(79, 100, 107)
HSL
hsl(195, 15%, 36%)
HSB
hsb(195, 26%, 42%)
CMYK
cmyk(26%, 7%, 0%, 58%)
Oklch
oklch(48.9% 0.028 220.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#9EA9AD

Sky Blue · DarkGray · Silver Sand

HEX
#9EA9AD
RGB
rgb(158, 169, 173)
HSL
hsl(196, 8%, 65%)
HSB
hsb(196, 9%, 68%)
CMYK
cmyk(9%, 2%, 0%, 32%)
Oklch
oklch(72.7% 0.014 221.5)

Traditional「Sky Blue」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5E4431
314B5E

Analogous

5E3135
5E4431
5E5A31

Triadic

5E4431
315E44
44315E

Split-Comp.

5E4431
315E5A
31355E

Tetradic

5E4431
355E31
314B5E
5A315E

Contrast Matrix WCAG 2.1 Contrast

5E4431
9E6D4A
EBD1B7
4F646B
9EA9AD
—
2.0
Fail
6.1
AA
1.4
Fail
3.7
AA Large
2.0
Fail
—
3.0
AA Large
1.4
Fail
1.8
Fail
6.1
AA
3.0
AA Large
—
4.3
AA Large
1.6
Fail
1.4
Fail
1.4
Fail
4.3
AA Large
—
2.6
Fail
3.7
AA Large
1.8
Fail
1.6
Fail
2.6
Fail
—
White BG
8.9AAA
4.4AA Large
1.5Fail
6.2AA
2.4Fail
Black BG
2.3Fail
4.7AA
14.3AAA
3.4AA Large
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

535336
898852
E0E0BD
585869
A3A3AC

Deuteranopia

545637
8C8F55
E1E3BF
575569
A2A1AC

Tritanopia

5D393A
9C595B
EAC2C3
506868
9FABAB

Achromatopsia

4A4A4A
787878
D6D6D6
5F5F5F
A6A6A6

Shades & Tints Shades & Tints

#5E4431

Dark
Light

#9E6D4A

Dark
Light

#EBD1B7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5e4431;
  --color-2: #9e6d4a;
  --color-3: #ebd1b7;
  --color-4: #4f646b;
  --color-5: #9ea9ad;
}

SCSS

$color-1: #5e4431;
$color-2: #9e6d4a;
$color-3: #ebd1b7;
$color-4: #4f646b;
$color-5: #9ea9ad;

TAILWIND

colors: {
  'brand-1': '#5e4431',
  'brand-2': '#9e6d4a',
  'brand-3': '#ebd1b7',
  'brand-4': '#4f646b',
  'brand-5': '#9ea9ad',
}

RGB Array

[94, 68, 49], [158, 109, 74], [235, 209, 183], [79, 100, 107], [158, 169, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #5E4431, #9E6D4A, #EBD1B7, #4F646B, #9EA9AD is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #5e4431; --color-2: #9e6d4a; --color-3: #ebd1b7; --color-4: #4f646b; --color-5: #9ea9ad. 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. Restrained colors convey professionalism and trust. 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