← Back to Editor

#A9B7B8 · #52235D · #8E5894 · #E1C3C4 · #F0E0D8

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

#A9B7B8

Sky Blue · DarkGray · Lake Green

HEX
#A9B7B8
RGB
rgb(169, 183, 184)
HSL
hsl(184, 10%, 69%)
HSB
hsb(184, 8%, 72%)
CMYK
cmyk(8%, 1%, 0%, 28%)
Oklch
oklch(76.9% 0.016 202.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#52235D

Dark Plum · DarkSlateBlue · Eggplant

HEX
#52235D
RGB
rgb(82, 35, 93)
HSL
hsl(289, 45%, 25%)
HSB
hsb(289, 62%, 36%)
CMYK
cmyk(12%, 62%, 0%, 64%)
Oklch
oklch(34.9% 0.109 319.7)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#8E5894

Dark Plum · Gray · Violet

HEX
#8E5894
RGB
rgb(142, 88, 148)
HSL
hsl(294, 25%, 46%)
HSB
hsb(294, 41%, 58%)
CMYK
cmyk(4%, 41%, 0%, 42%)
Oklch
oklch(54.3% 0.110 323.3)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#E1C3C4

Peach Pink · LightGray · Cherry Blossom

HEX
#E1C3C4
RGB
rgb(225, 195, 196)
HSL
hsl(358, 33%, 82%)
HSB
hsb(358, 13%, 88%)
CMYK
cmyk(0%, 13%, 13%, 12%)
Oklch
oklch(84.3% 0.034 15.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#F0E0D8

Apricot · Beige · Peach Orange

HEX
#F0E0D8
RGB
rgb(240, 224, 216)
HSL
hsl(20, 44%, 89%)
HSB
hsb(20, 10%, 94%)
CMYK
cmyk(0%, 7%, 10%, 6%)
Oklch
oklch(91.7% 0.021 48.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A9B7B8
B8A9A8

Analogous

A8B8B1
A9B7B8
A8AFB8

Triadic

A9B7B8
B8A8B7
B7B8A8

Split-Comp.

A9B7B8
B8A8AF
B8B1A8

Tetradic

A9B7B8
B1A8B8
B8A9A8
AFB8A8

Contrast Matrix WCAG 2.1 Contrast

A9B7B8
52235D
8E5894
E1C3C4
F0E0D8
—
5.8
AA
2.6
Fail
1.3
Fail
1.6
Fail
5.8
AA
—
2.3
Fail
7.3
AAA
9.3
AAA
2.6
Fail
2.3
Fail
—
3.2
AA Large
4.1
AA Large
1.3
Fail
7.3
AAA
3.2
AA Large
—
1.3
Fail
1.6
Fail
9.3
AAA
4.1
AA Large
1.3
Fail
—
White BG
2.1Fail
12.0AAA
5.3AA
1.6Fail
1.3Fail
Black BG
10.2AAA
1.8Fail
4.0AA Large
12.8AAA
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAFB8
3E3D4F
777685
D4D4C4
E9E9DA

Deuteranopia

AEADB8
40444C
7A7E82
D6D8C4
EAEBDA

Tritanopia

AAB8B8
504441
8B7A78
E0C4C4
EFDBDC

Achromatopsia

B3B3B3
383838
6F6F6F
CCCCCC
E4E4E4

Shades & Tints Shades & Tints

#A9B7B8

Dark
Light

#52235D

Dark
Light

#8E5894

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a9b7b8;
  --color-2: #52235d;
  --color-3: #8e5894;
  --color-4: #e1c3c4;
  --color-5: #f0e0d8;
}

SCSS

$color-1: #a9b7b8;
$color-2: #52235d;
$color-3: #8e5894;
$color-4: #e1c3c4;
$color-5: #f0e0d8;

TAILWIND

colors: {
  'brand-1': '#a9b7b8',
  'brand-2': '#52235d',
  'brand-3': '#8e5894',
  'brand-4': '#e1c3c4',
  'brand-5': '#f0e0d8',
}

RGB Array

[169, 183, 184], [82, 35, 93], [142, 88, 148], [225, 195, 196], [240, 224, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #A9B7B8, #52235D, #8E5894, #E1C3C4, #F0E0D8 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: #a9b7b8; --color-2: #52235d; --color-3: #8e5894; --color-4: #e1c3c4; --color-5: #f0e0d8. 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