← Back to Editor

#2E221F · #F1EED9 · #F7EDBF · #58351A · #382313

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

#2E221F

Crimson · Black · Deep Berry

HEX
#2E221F
RGB
rgb(46, 34, 31)
HSL
hsl(12, 19%, 15%)
HSB
hsb(12, 33%, 18%)
CMYK
cmyk(0%, 26%, 33%, 82%)
Oklch
oklch(26.5% 0.019 34.4)

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

#F1EED9

Fresh Green · Beige · Lemon Cream

HEX
#F1EED9
RGB
rgb(241, 238, 217)
HSL
hsl(53, 46%, 90%)
HSB
hsb(53, 10%, 95%)
CMYK
cmyk(0%, 1%, 10%, 5%)
Oklch
oklch(94.6% 0.028 100.3)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F7EDBF

Goose Yellow · Bisque · Lemon Cream

HEX
#F7EDBF
RGB
rgb(247, 237, 191)
HSL
hsl(49, 78%, 86%)
HSB
hsb(49, 23%, 97%)
CMYK
cmyk(0%, 4%, 23%, 3%)
Oklch
oklch(94.3% 0.061 97.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#58351A

Tangerine · DarkOliveGreen · Cinnamon

HEX
#58351A
RGB
rgb(88, 53, 26)
HSL
hsl(26, 54%, 22%)
HSB
hsb(26, 70%, 35%)
CMYK
cmyk(0%, 40%, 70%, 65%)
Oklch
oklch(36.6% 0.064 56.6)

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

#382313

Tangerine · Black · Cinnamon

HEX
#382313
RGB
rgb(56, 35, 19)
HSL
hsl(26, 49%, 15%)
HSB
hsb(26, 66%, 22%)
CMYK
cmyk(0%, 38%, 66%, 78%)
Oklch
oklch(27.8% 0.042 57.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E221F
1F2B2E

Analogous

2E1F23
2E221F
2E291F

Triadic

2E221F
1F2E22
221F2E

Split-Comp.

2E221F
1F2E29
1F232E

Tetradic

2E221F
232E1F
1F2B2E
291F2E

Contrast Matrix WCAG 2.1 Contrast

2E221F
F1EED9
F7EDBF
58351A
382313
—
13.2
AAA
13.1
AAA
1.4
Fail
1.0
Fail
13.2
AAA
—
1.0
Fail
9.3
AAA
12.7
AAA
13.1
AAA
1.0
Fail
—
9.2
AAA
12.6
AAA
1.4
Fail
9.3
AAA
9.2
AAA
—
1.4
Fail
1.0
Fail
12.7
AAA
12.6
AAA
1.4
Fail
—
White BG
15.4AAA
1.2Fail
1.2Fail
10.8AAA
14.8AAA
Black BG
1.4Fail
18.0AAA
17.8AAA
1.9Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

292920
F0F0DE
F3F3CA
494921
2F2F17

Deuteranopia

2A2A20
F0F0DF
F3F4CD
4B4E22
303218

Tritanopia

2D2020
F1E2E3
F6D3D5
562627
371A1B

Achromatopsia

252525
EDEDED
EBEBEB
3C3C3C
272727

Shades & Tints Shades & Tints

#2E221F

Dark
Light

#F1EED9

Dark
Light

#F7EDBF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e221f;
  --color-2: #f1eed9;
  --color-3: #f7edbf;
  --color-4: #58351a;
  --color-5: #382313;
}

SCSS

$color-1: #2e221f;
$color-2: #f1eed9;
$color-3: #f7edbf;
$color-4: #58351a;
$color-5: #382313;

TAILWIND

colors: {
  'brand-1': '#2e221f',
  'brand-2': '#f1eed9',
  'brand-3': '#f7edbf',
  'brand-4': '#58351a',
  'brand-5': '#382313',
}

RGB Array

[46, 34, 31], [241, 238, 217], [247, 237, 191], [88, 53, 26], [56, 35, 19]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #2E221F, #F1EED9, #F7EDBF, #58351A, #382313 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: #2e221f; --color-2: #f1eed9; --color-3: #f7edbf; --color-4: #58351a; --color-5: #382313. 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