← Back to Editor

#514046 · #C90F8E · #F97187 · #FDC1A9 · #3F2A31

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#514046

Dark Violet · DarkSlateGray · Camellia

HEX
#514046
RGB
rgb(81, 64, 70)
HSL
hsl(339, 12%, 28%)
HSB
hsb(339, 21%, 32%)
CMYK
cmyk(0%, 21%, 14%, 68%)
Oklch
oklch(39.2% 0.025 355.2)

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

#C90F8E

Rose Purple · MediumVioletRed · Violet

HEX
#C90F8E
RGB
rgb(201, 15, 142)
HSL
hsl(319, 86%, 42%)
HSB
hsb(319, 93%, 79%)
CMYK
cmyk(0%, 93%, 29%, 21%)
Oklch
oklch(55.9% 0.230 346.7)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#F97187

Peach Pink · LightCoral · Coral Red

HEX
#F97187
RGB
rgb(249, 113, 135)
HSL
hsl(350, 92%, 71%)
HSB
hsb(350, 55%, 98%)
CMYK
cmyk(0%, 55%, 46%, 2%)
Oklch
oklch(71.7% 0.167 12.3)

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

#FDC1A9

Apricot · LightPink · Peach Orange

HEX
#FDC1A9
RGB
rgb(253, 193, 169)
HSL
hsl(17, 95%, 83%)
HSB
hsb(17, 33%, 99%)
CMYK
cmyk(0%, 24%, 33%, 1%)
Oklch
oklch(85.9% 0.077 42.8)

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

#3F2A31

Dark Violet · DarkSlateGray · Raspberry

HEX
#3F2A31
RGB
rgb(63, 42, 49)
HSL
hsl(340, 20%, 21%)
HSB
hsb(340, 33%, 25%)
CMYK
cmyk(0%, 33%, 22%, 75%)
Oklch
oklch(31.3% 0.033 357.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

514046
3F504A

Analogous

503F4D
514046
50413F

Triadic

514046
45503F
3F4550

Split-Comp.

514046
3F5041
3F4D50

Tetradic

514046
4D503F
3F504A
413F50

Contrast Matrix WCAG 2.1 Contrast

514046
C90F8E
F97187
FDC1A9
3F2A31
—
1.8
Fail
3.6
AA Large
6.2
AA
1.4
Fail
1.8
Fail
—
2.0
Fail
3.4
AA Large
2.5
Fail
3.6
AA Large
2.0
Fail
—
1.7
Fail
4.9
AA
6.2
AA
3.4
AA Large
1.7
Fail
—
8.4
AAA
1.4
Fail
2.5
Fail
4.9
AA
8.4
AAA
—
White BG
9.7AAA
5.3AA
2.7Fail
1.6Fail
13.2AAA
Black BG
2.2Fail
3.9AA Large
7.7AAA
13.4AAA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4945
78776F
BEBD82
E3E2AF
36362F

Deuteranopia

4B4C44
839168
C6D080
E7EBB0
37392F

Tritanopia

504343
C05752
F27D7D
FAB3B4
3E2E2E

Achromatopsia

464646
555555
9C9C9C
D0D0D0
313131

Shades & Tints Shades & Tints

#514046

Dark
Light

#C90F8E

Dark
Light

#F97187

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #514046;
  --color-2: #c90f8e;
  --color-3: #f97187;
  --color-4: #fdc1a9;
  --color-5: #3f2a31;
}

SCSS

$color-1: #514046;
$color-2: #c90f8e;
$color-3: #f97187;
$color-4: #fdc1a9;
$color-5: #3f2a31;

TAILWIND

colors: {
  'brand-1': '#514046',
  'brand-2': '#c90f8e',
  'brand-3': '#f97187',
  'brand-4': '#fdc1a9',
  'brand-5': '#3f2a31',
}

RGB Array

[81, 64, 70], [201, 15, 142], [249, 113, 135], [253, 193, 169], [63, 42, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #514046, #C90F8E, #F97187, #FDC1A9, #3F2A31 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #514046; --color-2: #c90f8e; --color-3: #f97187; --color-4: #fdc1a9; --color-5: #3f2a31. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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