← Back to Editor

#5D3726 · #5F5246 · #839C94 · #91CAB6 · #D8EBE4

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

#5D3726

Tangerine · DarkOliveGreen · Amber Brown

HEX
#5D3726
RGB
rgb(93, 55, 38)
HSL
hsl(19, 42%, 26%)
HSB
hsb(19, 59%, 36%)
CMYK
cmyk(0%, 41%, 59%, 64%)
Oklch
oklch(37.9% 0.061 44.6)

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

#5F5246

Tangerine · DarkOliveGreen · Amber Brown

HEX
#5F5246
RGB
rgb(95, 82, 70)
HSL
hsl(29, 15%, 32%)
HSB
hsb(29, 26%, 37%)
CMYK
cmyk(0%, 14%, 26%, 63%)
Oklch
oklch(44.8% 0.026 64.8)

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

#839C94

Mineral Blue · LightSlateGray · Lake Green

HEX
#839C94
RGB
rgb(131, 156, 148)
HSL
hsl(161, 11%, 56%)
HSB
hsb(161, 16%, 61%)
CMYK
cmyk(16%, 0%, 5%, 39%)
Oklch
oklch(67.1% 0.030 174.0)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#91CAB6

Jade · DarkSeaGreen · Apple Green

HEX
#91CAB6
RGB
rgb(145, 202, 182)
HSL
hsl(159, 35%, 68%)
HSB
hsb(159, 28%, 79%)
CMYK
cmyk(28%, 0%, 10%, 21%)
Oklch
oklch(79.4% 0.066 170.8)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#D8EBE4

Jade · Lavender · Mint Green

HEX
#D8EBE4
RGB
rgb(216, 235, 228)
HSL
hsl(158, 32%, 88%)
HSB
hsb(158, 8%, 92%)
CMYK
cmyk(8%, 0%, 3%, 8%)
Oklch
oklch(92.4% 0.022 171.8)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5D3726
264D5E

Analogous

5E2631
5D3726
5E5426

Triadic

5D3726
265E38
38265E

Split-Comp.

5D3726
265E54
26315E

Tetradic

5D3726
315E26
264D5E
54265E

Contrast Matrix WCAG 2.1 Contrast

5D3726
5F5246
839C94
91CAB6
D8EBE4
—
1.4
Fail
3.5
AA Large
5.6
AA
8.3
AAA
1.4
Fail
—
2.6
Fail
4.1
AA Large
6.1
AA
3.5
AA Large
2.6
Fail
—
1.6
Fail
2.4
Fail
5.6
AA
4.1
AA Large
1.6
Fail
—
1.5
Fail
8.3
AAA
6.1
AA
2.4
Fail
1.5
Fail
—
White BG
10.3AAA
7.5AAA
2.9Fail
1.9Fail
1.2Fail
Black BG
2.0Fail
2.8Fail
7.1AAA
11.3AAA
16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4D4C2A
595949
8E8E96
AAAABB
E0E0E6

Deuteranopia

4F522B
5A5B4A
8C8B96
A6A2BC
DFDEE6

Tritanopia

5B2D2E
5E4B4C
849798
94BFC0
D9E7E7

Achromatopsia

404040
555555
949494
B7B7B7
E5E5E5

Shades & Tints Shades & Tints

#5D3726

Dark
Light

#5F5246

Dark
Light

#839C94

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5d3726;
  --color-2: #5f5246;
  --color-3: #839c94;
  --color-4: #91cab6;
  --color-5: #d8ebe4;
}

SCSS

$color-1: #5d3726;
$color-2: #5f5246;
$color-3: #839c94;
$color-4: #91cab6;
$color-5: #d8ebe4;

TAILWIND

colors: {
  'brand-1': '#5d3726',
  'brand-2': '#5f5246',
  'brand-3': '#839c94',
  'brand-4': '#91cab6',
  'brand-5': '#d8ebe4',
}

RGB Array

[93, 55, 38], [95, 82, 70], [131, 156, 148], [145, 202, 182], [216, 235, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #5D3726, #5F5246, #839C94, #91CAB6, #D8EBE4 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: #5d3726; --color-2: #5f5246; --color-3: #839c94; --color-4: #91cab6; --color-5: #d8ebe4. 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