← Back to Editor

#2A170E · #000000 · #80061C · #F3A178 · #F6F4C2

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

#2A170E

Tangerine · Black · Cinnamon

HEX
#2A170E
RGB
rgb(42, 23, 14)
HSL
hsl(19, 50%, 11%)
HSB
hsb(19, 67%, 16%)
CMYK
cmyk(0%, 45%, 67%, 84%)
Oklch
oklch(22.8% 0.035 45.9)

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

#000000

Ink Black · Black · Jet Black

HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
HSB
hsb(0, 0%, 0%)
CMYK
cmyk(0%, 0%, 0%, 100%)
Oklch
oklch(0.0% 0.000 0.0)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#80061C

Vermilion · Maroon · Wine Red

HEX
#80061C
RGB
rgb(128, 6, 28)
HSL
hsl(349, 91%, 26%)
HSB
hsb(349, 95%, 50%)
CMYK
cmyk(0%, 95%, 78%, 50%)
Oklch
oklch(38.2% 0.149 21.3)

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

#F3A178

Apricot · LightSalmon · Warm Sun

HEX
#F3A178
RGB
rgb(243, 161, 120)
HSL
hsl(20, 84%, 71%)
HSB
hsb(20, 51%, 95%)
CMYK
cmyk(0%, 34%, 51%, 5%)
Oklch
oklch(78.1% 0.112 47.2)

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

#F6F4C2

Fresh Green · Bisque · Lemon Cream

HEX
#F6F4C2
RGB
rgb(246, 244, 194)
HSL
hsl(58, 74%, 86%)
HSB
hsb(58, 21%, 96%)
CMYK
cmyk(0%, 1%, 21%, 4%)
Oklch
oklch(95.6% 0.065 105.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A170E
0E212A

Analogous

2A0E13
2A170E
2A250E

Triadic

2A170E
0E2A17
170E2A

Split-Comp.

2A170E
0E2A25
0E132A

Tetradic

2A170E
132A0E
0E212A
250E2A

Contrast Matrix WCAG 2.1 Contrast

2A170E
000000
80061C
F3A178
F6F4C2
—
1.2
Fail
1.6
Fail
8.3
AAA
15.2
AAA
1.2
Fail
—
2.0
Fail
10.2
AAA
18.6
AAA
1.6
Fail
2.0
Fail
—
5.2
AA
9.5
AAA
8.3
AAA
10.2
AAA
5.2
AA
—
1.8
Fail
15.2
AAA
18.6
AAA
9.5
AAA
1.8
Fail
—
White BG
17.1AAA
21.0AAA
10.7AAA
2.1Fail
1.1Fail
Black BG
1.2Fail
1.0Fail
2.0Fail
10.2AAA
18.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

222210
000000
4B4A17
CFCF82
F5F5CE

Deuteranopia

232411
000000
525B15
D4DA84
F5F5D1

Tritanopia

291212
000000
7A1212
EF8A8B
F6D8DA

Achromatopsia

1C1C1C
000000
2D2D2D
B5B5B5
EFEFEF

Shades & Tints Shades & Tints

#2A170E

Dark
Light

#000000

Dark
Light

#80061C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a170e;
  --color-2: #000000;
  --color-3: #80061c;
  --color-4: #f3a178;
  --color-5: #f6f4c2;
}

SCSS

$color-1: #2a170e;
$color-2: #000000;
$color-3: #80061c;
$color-4: #f3a178;
$color-5: #f6f4c2;

TAILWIND

colors: {
  'brand-1': '#2a170e',
  'brand-2': '#000000',
  'brand-3': '#80061c',
  'brand-4': '#f3a178',
  'brand-5': '#f6f4c2',
}

RGB Array

[42, 23, 14], [0, 0, 0], [128, 6, 28], [243, 161, 120], [246, 244, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #2A170E, #000000, #80061C, #F3A178, #F6F4C2 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: #2a170e; --color-2: #000000; --color-3: #80061c; --color-4: #f3a178; --color-5: #f6f4c2. 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