← Back to Editor

#87B4D2 · #FF99A0 · #FE575D · #CD0F1A · #5A384B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#87B4D2

Sky Blue · SkyBlue · Cobalt Blue

HEX
#87B4D2
RGB
rgb(135, 180, 210)
HSL
hsl(204, 45%, 68%)
HSB
hsb(204, 36%, 82%)
CMYK
cmyk(36%, 14%, 0%, 18%)
Oklch
oklch(74.8% 0.065 237.9)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#FF99A0

Peach Pink · LightSalmon · Coral Red

HEX
#FF99A0
RGB
rgb(255, 153, 160)
HSL
hsl(356, 100%, 80%)
HSB
hsb(356, 40%, 100%)
CMYK
cmyk(0%, 40%, 37%, 0%)
Oklch
oklch(79.0% 0.122 15.8)

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

#FE575D

Peach Pink · Tomato · Coral Red

HEX
#FE575D
RGB
rgb(254, 87, 93)
HSL
hsl(358, 99%, 67%)
HSB
hsb(358, 66%, 100%)
CMYK
cmyk(0%, 66%, 63%, 0%)
Oklch
oklch(68.4% 0.203 22.3)

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

#CD0F1A

Vermilion · FireBrick · Passion Red

HEX
#CD0F1A
RGB
rgb(205, 15, 26)
HSL
hsl(357, 86%, 43%)
HSB
hsb(357, 93%, 80%)
CMYK
cmyk(0%, 93%, 87%, 20%)
Oklch
oklch(53.8% 0.213 27.0)

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

#5A384B

Rose Purple · DarkSlateGray · Camellia

HEX
#5A384B
RGB
rgb(90, 56, 75)
HSL
hsl(326, 23%, 29%)
HSB
hsb(326, 38%, 35%)
CMYK
cmyk(0%, 38%, 17%, 65%)
Oklch
oklch(38.8% 0.056 345.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87B4D2
D2A689

Analogous

89D2CB
87B4D2
8990D2

Triadic

87B4D2
D289B5
B5D289

Split-Comp.

87B4D2
D28990
D2CB89

Tetradic

87B4D2
CB89D2
D2A689
90D289

Contrast Matrix WCAG 2.1 Contrast

87B4D2
FF99A0
FE575D
CD0F1A
5A384B
—
1.1
Fail
1.4
Fail
2.6
Fail
4.5
AA
1.1
Fail
—
1.5
Fail
2.8
Fail
4.9
AA
1.4
Fail
1.5
Fail
—
1.8
Fail
3.2
AA Large
2.6
Fail
2.8
Fail
1.8
Fail
—
1.8
Fail
4.5
AA
4.9
AA
3.2
AA Large
1.8
Fail
—
White BG
2.2Fail
2.0Fail
3.1AA Large
5.7AA
10.0AAA
Black BG
9.5AAA
10.3AAA
6.7AA
3.7AA Large
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9BCB
D3D29E
B6B45C
7B7917
4B4B46

Deuteranopia

9895C9
D9E09E
BFCC5B
869417
4D5045

Tritanopia

89C5C4
FA9D9D
F65A5A
C41515
584342

Achromatopsia

AAAAAA
B8B8B8
8A8A8A
494949
444444

Shades & Tints Shades & Tints

#87B4D2

Dark
Light

#FF99A0

Dark
Light

#FE575D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87b4d2;
  --color-2: #ff99a0;
  --color-3: #fe575d;
  --color-4: #cd0f1a;
  --color-5: #5a384b;
}

SCSS

$color-1: #87b4d2;
$color-2: #ff99a0;
$color-3: #fe575d;
$color-4: #cd0f1a;
$color-5: #5a384b;

TAILWIND

colors: {
  'brand-1': '#87b4d2',
  'brand-2': '#ff99a0',
  'brand-3': '#fe575d',
  'brand-4': '#cd0f1a',
  'brand-5': '#5a384b',
}

RGB Array

[135, 180, 210], [255, 153, 160], [254, 87, 93], [205, 15, 26], [90, 56, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87B4D2, #FF99A0, #FE575D, #CD0F1A, #5A384B 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: #87b4d2; --color-2: #ff99a0; --color-3: #fe575d; --color-4: #cd0f1a; --color-5: #5a384b. 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 general-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