← Back to Editor

#FA16F6 · #EC0EB5 · #CF137D · #B31549 · #822D0B

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 App

Color Details Color Details

#FA16F6

Rose Purple · Magenta · Violet

HEX
#FA16F6
RGB
rgb(250, 22, 246)
HSL
hsl(301, 96%, 53%)
HSB
hsb(301, 91%, 98%)
CMYK
cmyk(0%, 91%, 2%, 2%)
Oklch
oklch(69.3% 0.310 329.2)

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

#EC0EB5

Rose Purple · DeepPink · Violet

HEX
#EC0EB5
RGB
rgb(236, 14, 181)
HSL
hsl(315, 89%, 49%)
HSB
hsb(315, 94%, 93%)
CMYK
cmyk(0%, 94%, 23%, 7%)
Oklch
oklch(63.5% 0.268 342.6)

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

#CF137D

Rose Purple · MediumVioletRed · Camellia

HEX
#CF137D
RGB
rgb(207, 19, 125)
HSL
hsl(326, 83%, 44%)
HSB
hsb(326, 91%, 81%)
CMYK
cmyk(0%, 91%, 40%, 19%)
Oklch
oklch(56.4% 0.224 354.6)

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

#B31549

Dark Violet · Brown · Camellia

HEX
#B31549
RGB
rgb(179, 21, 73)
HSL
hsl(340, 79%, 39%)
HSB
hsb(340, 88%, 70%)
CMYK
cmyk(0%, 88%, 59%, 30%)
Oklch
oklch(49.8% 0.188 10.3)

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

#822D0B

Tangerine · Maroon · Amber Brown

HEX
#822D0B
RGB
rgb(130, 45, 11)
HSL
hsl(17, 84%, 28%)
HSB
hsb(17, 92%, 51%)
CMYK
cmyk(0%, 65%, 92%, 49%)
Oklch
oklch(41.8% 0.125 39.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FA16F6
14FA18

Analogous

8B14FA
FA16F6
FA1483

Triadic

FA16F6
F6FA14
14F6FA

Split-Comp.

FA16F6
83FA14
14FA8B

Tetradic

FA16F6
FA8B14
14FA18
1483FA

Contrast Matrix WCAG 2.1 Contrast

FA16F6
EC0EB5
CF137D
B31549
822D0B
—
1.2
Fail
1.6
Fail
2.1
Fail
2.8
Fail
1.2
Fail
—
1.3
Fail
1.7
Fail
2.3
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
2.1
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
2.8
Fail
2.3
Fail
1.7
Fail
1.3
Fail
—
White BG
3.2AA Large
4.0AA Large
5.2AA
6.7AA
9.0AAA
Black BG
6.5AA
5.3AA
4.0AA Large
3.1AA Large
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9795C0
8C8A8D
7E7C63
6F6D3C
5D5C13

Deuteranopia

A5B6B3
99A983
89975D
788439
626915

Tritanopia

EF958C
E16D66
C64F4B
AB3230
7E1A1B

Achromatopsia

747474
636363
575757
4A4A4A
434343

Shades & Tints Shades & Tints

#FA16F6

Dark
Light

#EC0EB5

Dark
Light

#CF137D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fa16f6;
  --color-2: #ec0eb5;
  --color-3: #cf137d;
  --color-4: #b31549;
  --color-5: #822d0b;
}

SCSS

$color-1: #fa16f6;
$color-2: #ec0eb5;
$color-3: #cf137d;
$color-4: #b31549;
$color-5: #822d0b;

TAILWIND

colors: {
  'brand-1': '#fa16f6',
  'brand-2': '#ec0eb5',
  'brand-3': '#cf137d',
  'brand-4': '#b31549',
  'brand-5': '#822d0b',
}

RGB Array

[250, 22, 246], [236, 14, 181], [207, 19, 125], [179, 21, 73], [130, 45, 11]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #FA16F6, #EC0EB5, #CF137D, #B31549, #822D0B is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #fa16f6; --color-2: #ec0eb5; --color-3: #cf137d; --color-4: #b31549; --color-5: #822d0b. 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. 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