← Back to Editor

#2A1A1B · #503C33 · #5B8B73 · #87BAAB · #AFE4DC

coffee

A 5-color coffee palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2A1A1B

Crimson · Black · Deep Berry

HEX
#2A1A1B
RGB
rgb(42, 26, 27)
HSL
hsl(356, 24%, 13%)
HSB
hsb(356, 38%, 16%)
CMYK
cmyk(0%, 38%, 36%, 84%)
Oklch
oklch(23.9% 0.026 15.0)

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

#503C33

Tangerine · DarkSlateGray · Amber Brown

HEX
#503C33
RGB
rgb(80, 60, 51)
HSL
hsl(19, 22%, 26%)
HSB
hsb(19, 36%, 31%)
CMYK
cmyk(0%, 25%, 36%, 69%)
Oklch
oklch(37.5% 0.032 45.4)

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

#5B8B73

Mineral Blue · SlateGray · Olive Green

HEX
#5B8B73
RGB
rgb(91, 139, 115)
HSL
hsl(150, 21%, 45%)
HSB
hsb(150, 35%, 55%)
CMYK
cmyk(35%, 0%, 17%, 45%)
Oklch
oklch(59.5% 0.064 161.9)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#87BAAB

Jade · DarkSeaGreen · Lake Green

HEX
#87BAAB
RGB
rgb(135, 186, 171)
HSL
hsl(162, 27%, 63%)
HSB
hsb(162, 27%, 73%)
CMYK
cmyk(27%, 0%, 8%, 27%)
Oklch
oklch(74.9% 0.058 174.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#AFE4DC

Jade · LightBlue · Glacier Blue

HEX
#AFE4DC
RGB
rgb(175, 228, 220)
HSL
hsl(171, 50%, 79%)
HSB
hsb(171, 23%, 89%)
CMYK
cmyk(23%, 0%, 4%, 11%)
Oklch
oklch(88.0% 0.055 184.8)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A1A1B
192928

Analogous

291922
2A1A1B
292019

Triadic

2A1A1B
1A2919
191A29

Split-Comp.

2A1A1B
192920
192229

Tetradic

2A1A1B
222919
192928
201929

Contrast Matrix WCAG 2.1 Contrast

2A1A1B
503C33
5B8B73
87BAAB
AFE4DC
—
1.6
Fail
4.3
AA Large
7.6
AAA
11.8
AAA
1.6
Fail
—
2.6
Fail
4.7
AA
7.3
AAA
4.3
AA Large
2.6
Fail
—
1.8
Fail
2.8
Fail
7.6
AAA
4.7
AA
1.8
Fail
—
1.6
Fail
11.8
AAA
7.3
AAA
2.8
Fail
1.6
Fail
—
White BG
16.6AAA
10.3AAA
3.9AA Large
2.2Fail
1.4Fail
Black BG
1.3Fail
2.0Fail
5.4AA
9.6AAA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

23231B
474735
707079
9D9EAF
C6C6DE

Deuteranopia

24251B
494A36
6D697A
9A96B0
C3BFDE

Tritanopia

291B1B
4F3737
5D7D7E
8AB1B2
B2DFE0

Achromatopsia

1F1F1F
414141
7A7A7A
A9A9A9
D3D3D3

Shades & Tints Shades & Tints

#2A1A1B

Dark
Light

#503C33

Dark
Light

#5B8B73

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a1a1b;
  --color-2: #503c33;
  --color-3: #5b8b73;
  --color-4: #87baab;
  --color-5: #afe4dc;
}

SCSS

$color-1: #2a1a1b;
$color-2: #503c33;
$color-3: #5b8b73;
$color-4: #87baab;
$color-5: #afe4dc;

TAILWIND

colors: {
  'brand-1': '#2a1a1b',
  'brand-2': '#503c33',
  'brand-3': '#5b8b73',
  'brand-4': '#87baab',
  'brand-5': '#afe4dc',
}

RGB Array

[42, 26, 27], [80, 60, 51], [91, 139, 115], [135, 186, 171], [175, 228, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #2A1A1B, #503C33, #5B8B73, #87BAAB, #AFE4DC is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #2a1a1b; --color-2: #503c33; --color-3: #5b8b73; --color-4: #87baab; --color-5: #afe4dc. 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. Restrained colors convey professionalism and trust. 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