← Back to Editor

#381712 · #49262F · #BA6E38 · #EBAF7F · #F2DECE

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

#381712

Crimson · Black · Deep Berry

HEX
#381712
RGB
rgb(56, 23, 18)
HSL
hsl(8, 51%, 15%)
HSB
hsb(8, 68%, 22%)
CMYK
cmyk(0%, 59%, 68%, 78%)
Oklch
oklch(25.3% 0.054 30.2)

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

#49262F

Crimson · DarkSlateGray · Wine Red

HEX
#49262F
RGB
rgb(73, 38, 47)
HSL
hsl(345, 32%, 22%)
HSB
hsb(345, 48%, 29%)
CMYK
cmyk(0%, 48%, 36%, 71%)
Oklch
oklch(31.8% 0.054 4.1)

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

#BA6E38

Tangerine · Chocolate · Amber Brown

HEX
#BA6E38
RGB
rgb(186, 110, 56)
HSL
hsl(25, 54%, 47%)
HSB
hsb(25, 70%, 73%)
CMYK
cmyk(0%, 41%, 70%, 27%)
Oklch
oklch(61.2% 0.119 53.8)

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

#EBAF7F

Apricot · BurlyWood · Warm Sun

HEX
#EBAF7F
RGB
rgb(235, 175, 127)
HSL
hsl(27, 73%, 71%)
HSB
hsb(27, 46%, 92%)
CMYK
cmyk(0%, 26%, 46%, 8%)
Oklch
oklch(79.9% 0.094 59.5)

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

#F2DECE

Apricot · Bisque · Peach Orange

HEX
#F2DECE
RGB
rgb(242, 222, 206)
HSL
hsl(27, 58%, 88%)
HSB
hsb(27, 15%, 95%)
CMYK
cmyk(0%, 8%, 15%, 5%)
Oklch
oklch(91.3% 0.031 61.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

381712
13353A

Analogous

3A1321
381712
3A2B13

Triadic

381712
133A18
18133A

Split-Comp.

381712
133A2B
13213A

Tetradic

381712
213A13
13353A
2B133A

Contrast Matrix WCAG 2.1 Contrast

381712
49262F
BA6E38
EBAF7F
F2DECE
—
1.2
Fail
4.1
AA Large
8.4
AAA
12.4
AAA
1.2
Fail
—
3.4
AA Large
6.9
AA
10.1
AAA
4.1
AA Large
3.4
AA Large
—
2.0
Fail
3.0
Fail
8.4
AAA
6.9
AA
2.0
Fail
—
1.5
Fail
12.4
AAA
10.1
AAA
3.0
Fail
1.5
Fail
—
White BG
16.2AAA
13.1AAA
3.9AA Large
1.9Fail
1.3Fail
Black BG
1.3Fail
1.6Fail
5.4AA
11.0AAA
16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2913
3A3A2D
999845
D1D08B
E9E9D2

Deuteranopia

2C2E14
3C3E2C
9EA348
D5D98D
EBECD3

Tritanopia

361414
472B2B
B64F52
E89496
F1D5D6

Achromatopsia

202020
313131
7F7F7F
BBBBBB
E2E2E2

Shades & Tints Shades & Tints

#381712

Dark
Light

#49262F

Dark
Light

#BA6E38

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #381712;
  --color-2: #49262f;
  --color-3: #ba6e38;
  --color-4: #ebaf7f;
  --color-5: #f2dece;
}

SCSS

$color-1: #381712;
$color-2: #49262f;
$color-3: #ba6e38;
$color-4: #ebaf7f;
$color-5: #f2dece;

TAILWIND

colors: {
  'brand-1': '#381712',
  'brand-2': '#49262f',
  'brand-3': '#ba6e38',
  'brand-4': '#ebaf7f',
  'brand-5': '#f2dece',
}

RGB Array

[56, 23, 18], [73, 38, 47], [186, 110, 56], [235, 175, 127], [242, 222, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #381712, #49262F, #BA6E38, #EBAF7F, #F2DECE 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: #381712; --color-2: #49262f; --color-3: #ba6e38; --color-4: #ebaf7f; --color-5: #f2dece. 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