← Back to Editor

#382924 · #291F20 · #F7C28E · #7D271A · #B62D1D

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

#382924

Tangerine · DarkSlateGray · Cinnamon

HEX
#382924
RGB
rgb(56, 41, 36)
HSL
hsl(15, 22%, 18%)
HSB
hsb(15, 36%, 22%)
CMYK
cmyk(0%, 27%, 36%, 78%)
Oklch
oklch(29.7% 0.024 39.2)

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

#291F20

Crimson · Black · Deep Berry

HEX
#291F20
RGB
rgb(41, 31, 32)
HSL
hsl(354, 14%, 14%)
HSB
hsb(354, 24%, 16%)
CMYK
cmyk(0%, 24%, 22%, 84%)
Oklch
oklch(25.2% 0.016 11.5)

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

#F7C28E

Goose Yellow · BurlyWood · Peach Orange

HEX
#F7C28E
RGB
rgb(247, 194, 142)
HSL
hsl(30, 87%, 76%)
HSB
hsb(30, 43%, 97%)
CMYK
cmyk(0%, 21%, 43%, 3%)
Oklch
oklch(85.0% 0.091 65.6)

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

#7D271A

Vermilion · Brown · Wine Red

HEX
#7D271A
RGB
rgb(125, 39, 26)
HSL
hsl(8, 66%, 30%)
HSB
hsb(8, 79%, 49%)
CMYK
cmyk(0%, 69%, 79%, 51%)
Oklch
oklch(40.3% 0.122 31.3)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#B62D1D

Vermilion · FireBrick · Passion Red

HEX
#B62D1D
RGB
rgb(182, 45, 29)
HSL
hsl(6, 73%, 41%)
HSB
hsb(6, 84%, 71%)
CMYK
cmyk(0%, 75%, 84%, 29%)
Oklch
oklch(51.3% 0.176 30.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

382924
243338

Analogous

382429
382924
383324

Triadic

382924
243829
292438

Split-Comp.

382924
243833
242938

Tetradic

382924
293824
243338
332438

Contrast Matrix WCAG 2.1 Contrast

382924
291F20
F7C28E
7D271A
B62D1D
—
1.2
Fail
8.6
AAA
1.4
Fail
2.2
Fail
1.2
Fail
—
10.0
AAA
1.7
Fail
2.6
Fail
8.6
AAA
10.0
AAA
—
6.0
AA
3.9
AA Large
1.4
Fail
1.7
Fail
6.0
AA
—
1.6
Fail
2.2
Fail
2.6
Fail
3.9
AA Large
1.6
Fail
—
White BG
13.9AAA
16.0AAA
1.6Fail
9.6AAA
6.2AA
Black BG
1.5Fail
1.3Fail
13.1AAA
2.2Fail
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

323125
252520
E0E09B
58571D
7B7921

Deuteranopia

323326
252620
E3E79E
5D631E
838D22

Tritanopia

372626
282020
F4A5A7
792020
AF2425

Achromatopsia

2D2D2D
222222
CCCCCC
3F3F3F
545454

Shades & Tints Shades & Tints

#382924

Dark
Light

#291F20

Dark
Light

#F7C28E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #382924;
  --color-2: #291f20;
  --color-3: #f7c28e;
  --color-4: #7d271a;
  --color-5: #b62d1d;
}

SCSS

$color-1: #382924;
$color-2: #291f20;
$color-3: #f7c28e;
$color-4: #7d271a;
$color-5: #b62d1d;

TAILWIND

colors: {
  'brand-1': '#382924',
  'brand-2': '#291f20',
  'brand-3': '#f7c28e',
  'brand-4': '#7d271a',
  'brand-5': '#b62d1d',
}

RGB Array

[56, 41, 36], [41, 31, 32], [247, 194, 142], [125, 39, 26], [182, 45, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #382924, #291F20, #F7C28E, #7D271A, #B62D1D is ideal for: tech websites, dark mode UIs, game UIs, 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: #382924; --color-2: #291f20; --color-3: #f7c28e; --color-4: #7d271a; --color-5: #b62d1d. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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