← Back to Editor

#38201C · #62473E · #8B726D · #A49495 · #EBB8C7

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

#38201C

Crimson · DarkSlateGray · Deep Berry

HEX
#38201C
RGB
rgb(56, 32, 28)
HSL
hsl(9, 33%, 16%)
HSB
hsb(9, 50%, 22%)
CMYK
cmyk(0%, 43%, 50%, 78%)
Oklch
oklch(27.4% 0.038 30.0)

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

#62473E

Tangerine · DarkOliveGreen · Amber Brown

HEX
#62473E
RGB
rgb(98, 71, 62)
HSL
hsl(15, 23%, 31%)
HSB
hsb(15, 37%, 38%)
CMYK
cmyk(0%, 28%, 37%, 62%)
Oklch
oklch(42.5% 0.040 39.2)

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

#8B726D

Crimson · Gray · Passion Red

HEX
#8B726D
RGB
rgb(139, 114, 109)
HSL
hsl(10, 12%, 49%)
HSB
hsb(10, 22%, 55%)
CMYK
cmyk(0%, 18%, 22%, 45%)
Oklch
oklch(57.5% 0.033 31.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#A49495

Peach Pink · DarkGray · Silver Sand

HEX
#A49495
RGB
rgb(164, 148, 149)
HSL
hsl(356, 8%, 61%)
HSB
hsb(356, 10%, 64%)
CMYK
cmyk(0%, 10%, 9%, 36%)
Oklch
oklch(68.1% 0.019 13.3)

Traditional「Peach Pink」· Paint「Silver Sand」· Creative Urban Concrete

#EBB8C7

Rouge · LightPink · Cherry Blossom

HEX
#EBB8C7
RGB
rgb(235, 184, 199)
HSL
hsl(342, 56%, 82%)
HSB
hsb(342, 22%, 92%)
CMYK
cmyk(0%, 22%, 15%, 8%)
Oklch
oklch(83.3% 0.062 359.1)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

38201C
1B3236

Analogous

361B25
38201C
362D1B

Triadic

38201C
1B361F
1F1B36

Split-Comp.

38201C
1B362D
1B2536

Tetradic

38201C
25361B
1B3236
2D1B36

Contrast Matrix WCAG 2.1 Contrast

38201C
62473E
8B726D
A49495
EBB8C7
—
1.8
Fail
3.4
AA Large
5.2
AA
8.8
AAA
1.8
Fail
—
1.9
Fail
2.9
Fail
4.9
AA
3.4
AA Large
1.9
Fail
—
1.5
Fail
2.6
Fail
5.2
AA
2.9
Fail
1.5
Fail
—
1.7
Fail
8.8
AAA
4.9
AA
2.6
Fail
1.7
Fail
—
White BG
15.1AAA
8.4AAA
4.4AA Large
2.9Fail
1.7Fail
Black BG
1.4Fail
2.5Fail
4.7AA
7.2AAA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2D1D
565640
80806E
9D9D95
D5D4C3

Deuteranopia

2F311D
585A41
82846F
9E9F95
D8DCC2

Tritanopia

371E1E
614242
8A6F6F
A39595
E8C1C0

Achromatopsia

272727
4E4E4E
797979
999999
C9C9C9

Shades & Tints Shades & Tints

#38201C

Dark
Light

#62473E

Dark
Light

#8B726D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #38201c;
  --color-2: #62473e;
  --color-3: #8b726d;
  --color-4: #a49495;
  --color-5: #ebb8c7;
}

SCSS

$color-1: #38201c;
$color-2: #62473e;
$color-3: #8b726d;
$color-4: #a49495;
$color-5: #ebb8c7;

TAILWIND

colors: {
  'brand-1': '#38201c',
  'brand-2': '#62473e',
  'brand-3': '#8b726d',
  'brand-4': '#a49495',
  'brand-5': '#ebb8c7',
}

RGB Array

[56, 32, 28], [98, 71, 62], [139, 114, 109], [164, 148, 149], [235, 184, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #38201C, #62473E, #8B726D, #A49495, #EBB8C7 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: #38201c; --color-2: #62473e; --color-3: #8b726d; --color-4: #a49495; --color-5: #ebb8c7. 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