← Back to Editor

#57313D · #AB7989 · #FFFFFF · #FB5C81 · #E3214E

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

#57313D

Dark Violet · DarkSlateGray · Camellia

HEX
#57313D
RGB
rgb(87, 49, 61)
HSL
hsl(341, 28%, 27%)
HSB
hsb(341, 44%, 34%)
CMYK
cmyk(0%, 44%, 30%, 66%)
Oklch
oklch(36.5% 0.057 0.0)

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

#AB7989

Dark Violet · Gray · Rose Pink

HEX
#AB7989
RGB
rgb(171, 121, 137)
HSL
hsl(341, 23%, 57%)
HSB
hsb(341, 29%, 67%)
CMYK
cmyk(0%, 29%, 20%, 33%)
Oklch
oklch(63.1% 0.066 358.3)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#FB5C81

Peach Pink · LightCoral · Coral Red

HEX
#FB5C81
RGB
rgb(251, 92, 129)
HSL
hsl(346, 95%, 67%)
HSB
hsb(346, 63%, 98%)
CMYK
cmyk(0%, 63%, 49%, 2%)
Oklch
oklch(69.2% 0.195 9.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#E3214E

Vermilion · Crimson · Passion Red

HEX
#E3214E
RGB
rgb(227, 33, 78)
HSL
hsl(346, 78%, 51%)
HSB
hsb(346, 85%, 89%)
CMYK
cmyk(0%, 85%, 66%, 11%)
Oklch
oklch(59.2% 0.222 16.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

57313D
32584C

Analogous

583251
57313D
583932

Triadic

57313D
3E5832
323E58

Split-Comp.

57313D
325839
325158

Tetradic

57313D
515832
32584C
393258

Contrast Matrix WCAG 2.1 Contrast

57313D
AB7989
FFFFFF
FB5C81
E3214E
—
3.0
AA Large
11.0
AAA
3.6
AA Large
2.4
Fail
3.0
AA Large
—
3.6
AA Large
1.2
Fail
1.3
Fail
11.0
AAA
3.6
AA Large
—
3.0
AA Large
4.6
AA
3.6
AA Large
1.2
Fail
3.0
AA Large
—
1.5
Fail
2.4
Fail
1.3
Fail
4.6
AA
1.5
Fail
—
White BG
11.0AAA
3.6AA Large
1.0Fail
3.0AA Large
4.6AA
Black BG
1.9Fail
5.8AA
21.0AAA
6.9AA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47463A
959585
FFFFFF
B6B578
8F8D43

Deuteranopia

494C39
989C84
FFFFFF
BFCB76
9AA941

Tritanopia

553837
A98281
FFFFFF
F3716F
D93B39

Achromatopsia

3E3E3E
8A8A8A
FFFFFF
909090
606060

Shades & Tints Shades & Tints

#57313D

Dark
Light

#AB7989

Dark
Light

#FFFFFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #57313d;
  --color-2: #ab7989;
  --color-3: #ffffff;
  --color-4: #fb5c81;
  --color-5: #e3214e;
}

SCSS

$color-1: #57313d;
$color-2: #ab7989;
$color-3: #ffffff;
$color-4: #fb5c81;
$color-5: #e3214e;

TAILWIND

colors: {
  'brand-1': '#57313d',
  'brand-2': '#ab7989',
  'brand-3': '#ffffff',
  'brand-4': '#fb5c81',
  'brand-5': '#e3214e',
}

RGB Array

[87, 49, 61], [171, 121, 137], [255, 255, 255], [251, 92, 129], [227, 33, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #57313D, #AB7989, #FFFFFF, #FB5C81, #E3214E 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: #57313d; --color-2: #ab7989; --color-3: #ffffff; --color-4: #fb5c81; --color-5: #e3214e. 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