← Back to Editor

#5A3D3F · #885B62 · #CD6983 · #DD8EA4 · #FCC4B7

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

#5A3D3F

Crimson · DarkOliveGreen · Wine Red

HEX
#5A3D3F
RGB
rgb(90, 61, 63)
HSL
hsl(356, 19%, 30%)
HSB
hsb(356, 32%, 35%)
CMYK
cmyk(0%, 32%, 30%, 65%)
Oklch
oklch(39.4% 0.041 14.5)

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

#885B62

Crimson · DimGray · Passion Red

HEX
#885B62
RGB
rgb(136, 91, 98)
HSL
hsl(351, 20%, 45%)
HSB
hsb(351, 33%, 53%)
CMYK
cmyk(0%, 33%, 28%, 47%)
Oklch
oklch(52.2% 0.060 9.1)

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

#CD6983

Rouge · LightCoral · Rose Pink

HEX
#CD6983
RGB
rgb(205, 105, 131)
HSL
hsl(344, 50%, 61%)
HSB
hsb(344, 49%, 80%)
CMYK
cmyk(0%, 49%, 36%, 20%)
Oklch
oklch(64.4% 0.129 4.8)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#DD8EA4

Rouge · LightCoral · Rose Pink

HEX
#DD8EA4
RGB
rgb(221, 142, 164)
HSL
hsl(343, 54%, 71%)
HSB
hsb(343, 36%, 87%)
CMYK
cmyk(0%, 36%, 26%, 13%)
Oklch
oklch(73.3% 0.099 1.7)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#FCC4B7

Peach Pink · LightPink · Cherry Blossom

HEX
#FCC4B7
RGB
rgb(252, 196, 183)
HSL
hsl(11, 92%, 85%)
HSB
hsb(11, 27%, 99%)
CMYK
cmyk(0%, 22%, 27%, 1%)
Oklch
oklch(86.7% 0.067 33.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A3D3F
3E5B59

Analogous

5B3E4E
5A3D3F
5B4B3E

Triadic

5A3D3F
405B3E
3E405B

Split-Comp.

5A3D3F
3E5B4B
3E4E5B

Tetradic

5A3D3F
4E5B3E
3E5B59
4B3E5B

Contrast Matrix WCAG 2.1 Contrast

5A3D3F
885B62
CD6983
DD8EA4
FCC4B7
—
1.7
Fail
2.7
Fail
3.9
AA Large
6.3
AA
1.7
Fail
—
1.6
Fail
2.3
Fail
3.7
AA Large
2.7
Fail
1.6
Fail
—
1.4
Fail
2.3
Fail
3.9
AA Large
2.3
Fail
1.4
Fail
—
1.6
Fail
6.3
AA
3.7
AA Large
2.3
Fail
1.6
Fail
—
White BG
9.7AAA
5.6AA
3.5AA Large
2.5Fail
1.5Fail
Black BG
2.2Fail
3.7AA Large
5.9AA
8.5AAA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4D4D3F
757460
A2A17D
BBBA9F
E4E3BA

Deuteranopia

4F513E
777A60
A8AF7B
BFC59D
E7EBBB

Tritanopia

593E3E
865F5F
C87877
D99A9A
F9BDBD

Achromatopsia

464646
696969
8A8A8A
A8A8A8
D3D3D3

Shades & Tints Shades & Tints

#5A3D3F

Dark
Light

#885B62

Dark
Light

#CD6983

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a3d3f;
  --color-2: #885b62;
  --color-3: #cd6983;
  --color-4: #dd8ea4;
  --color-5: #fcc4b7;
}

SCSS

$color-1: #5a3d3f;
$color-2: #885b62;
$color-3: #cd6983;
$color-4: #dd8ea4;
$color-5: #fcc4b7;

TAILWIND

colors: {
  'brand-1': '#5a3d3f',
  'brand-2': '#885b62',
  'brand-3': '#cd6983',
  'brand-4': '#dd8ea4',
  'brand-5': '#fcc4b7',
}

RGB Array

[90, 61, 63], [136, 91, 98], [205, 105, 131], [221, 142, 164], [252, 196, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #5A3D3F, #885B62, #CD6983, #DD8EA4, #FCC4B7 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: #5a3d3f; --color-2: #885b62; --color-3: #cd6983; --color-4: #dd8ea4; --color-5: #fcc4b7. 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