← Back to Editor

#2A1F1B · #886851 · #EBD184 · #C99945 · #4A281E

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

#2A1F1B

Tangerine · Black · Cinnamon

HEX
#2A1F1B
RGB
rgb(42, 31, 27)
HSL
hsl(16, 22%, 14%)
HSB
hsb(16, 36%, 16%)
CMYK
cmyk(0%, 26%, 36%, 84%)
Oklch
oklch(25.1% 0.019 40.9)

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

#886851

Tangerine · DimGray · Amber Brown

HEX
#886851
RGB
rgb(136, 104, 81)
HSL
hsl(25, 25%, 43%)
HSB
hsb(25, 40%, 53%)
CMYK
cmyk(0%, 24%, 40%, 47%)
Oklch
oklch(54.3% 0.053 57.0)

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

#EBD184

Goose Yellow · Khaki · Sunflower

HEX
#EBD184
RGB
rgb(235, 209, 132)
HSL
hsl(45, 72%, 72%)
HSB
hsb(45, 44%, 92%)
CMYK
cmyk(0%, 11%, 44%, 8%)
Oklch
oklch(86.6% 0.101 91.4)

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

#C99945

Ginger · GoldenRod · Warm Sun

HEX
#C99945
RGB
rgb(201, 153, 69)
HSL
hsl(38, 55%, 53%)
HSB
hsb(38, 66%, 79%)
CMYK
cmyk(0%, 24%, 66%, 21%)
Oklch
oklch(71.2% 0.116 78.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#4A281E

Crimson · DarkSlateGray · Deep Berry

HEX
#4A281E
RGB
rgb(74, 40, 30)
HSL
hsl(14, 42%, 20%)
HSB
hsb(14, 59%, 29%)
CMYK
cmyk(0%, 46%, 59%, 71%)
Oklch
oklch(31.9% 0.054 37.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A1F1B
1C272C

Analogous

2C1C20
2A1F1B
2C281C

Triadic

2A1F1B
1C2C20
201C2C

Split-Comp.

2A1F1B
1C2C28
1C202C

Tetradic

2A1F1B
202C1C
1C272C
281C2C

Contrast Matrix WCAG 2.1 Contrast

2A1F1B
886851
EBD184
C99945
4A281E
—
3.2
AA Large
10.7
AAA
6.2
AA
1.2
Fail
3.2
AA Large
—
3.4
AA Large
2.0
Fail
2.6
Fail
10.7
AAA
3.4
AA Large
—
1.7
Fail
8.7
AAA
6.2
AA
2.0
Fail
1.7
Fail
—
5.0
AA
1.2
Fail
2.6
Fail
8.7
AAA
5.0
AA
—
White BG
16.0AAA
5.1AA
1.5Fail
2.6Fail
13.0AAA
Black BG
1.3Fail
4.1AA Large
14.0AAA
8.1AAA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

25251C
7A7A57
E0E097
B4B459
3B3B20

Deuteranopia

26271C
7C7E58
E1E39B
B7BB5E
3D4021

Tritanopia

291D1D
865B5C
EAA5A9
C7696D
482223

Achromatopsia

222222
6F6F6F
D0D0D0
9E9E9E
313131

Shades & Tints Shades & Tints

#2A1F1B

Dark
Light

#886851

Dark
Light

#EBD184

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a1f1b;
  --color-2: #886851;
  --color-3: #ebd184;
  --color-4: #c99945;
  --color-5: #4a281e;
}

SCSS

$color-1: #2a1f1b;
$color-2: #886851;
$color-3: #ebd184;
$color-4: #c99945;
$color-5: #4a281e;

TAILWIND

colors: {
  'brand-1': '#2a1f1b',
  'brand-2': '#886851',
  'brand-3': '#ebd184',
  'brand-4': '#c99945',
  'brand-5': '#4a281e',
}

RGB Array

[42, 31, 27], [136, 104, 81], [235, 209, 132], [201, 153, 69], [74, 40, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #2A1F1B, #886851, #EBD184, #C99945, #4A281E 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: #2a1f1b; --color-2: #886851; --color-3: #ebd184; --color-4: #c99945; --color-5: #4a281e. 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