← Back to Editor

#8D1470 · #90A9E6 · #BCD0E0 · #8AC6FC · #687BC8

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

#8D1470

Rose Purple · Purple · Eggplant

HEX
#8D1470
RGB
rgb(141, 20, 112)
HSL
hsl(314, 75%, 32%)
HSB
hsb(314, 86%, 55%)
CMYK
cmyk(0%, 86%, 21%, 45%)
Oklch
oklch(44.2% 0.177 340.6)

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

#90A9E6

Azure · SkyBlue · Cobalt Blue

HEX
#90A9E6
RGB
rgb(144, 169, 230)
HSL
hsl(223, 63%, 73%)
HSB
hsb(223, 37%, 90%)
CMYK
cmyk(37%, 27%, 0%, 10%)
Oklch
oklch(73.9% 0.093 267.0)

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

#BCD0E0

Sky Blue · LightSteelBlue · Sky Blue

HEX
#BCD0E0
RGB
rgb(188, 208, 224)
HSL
hsl(207, 37%, 81%)
HSB
hsb(207, 16%, 88%)
CMYK
cmyk(16%, 7%, 0%, 12%)
Oklch
oklch(84.8% 0.031 242.1)

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

#8AC6FC

Sky Blue · LightSkyBlue · Cobalt Blue

HEX
#8AC6FC
RGB
rgb(138, 198, 252)
HSL
hsl(208, 95%, 76%)
HSB
hsb(208, 45%, 99%)
CMYK
cmyk(45%, 21%, 0%, 1%)
Oklch
oklch(80.6% 0.099 246.5)

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

#687BC8

Azure · SlateBlue · Navy Blue

HEX
#687BC8
RGB
rgb(104, 123, 200)
HSL
hsl(228, 47%, 60%)
HSB
hsb(228, 48%, 78%)
CMYK
cmyk(48%, 38%, 0%, 22%)
Oklch
oklch(60.2% 0.119 271.9)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8D1470
148F31

Analogous

6E148F
8D1470
8F1435

Triadic

8D1470
728F14
14728F

Split-Comp.

8D1470
358F14
148F6E

Tetradic

8D1470
8F6E14
148F31
14358F

Contrast Matrix WCAG 2.1 Contrast

8D1470
90A9E6
BCD0E0
8AC6FC
687BC8
—
3.7
AA Large
5.4
AA
4.7
AA
2.1
Fail
3.7
AA Large
—
1.5
Fail
1.3
Fail
1.7
Fail
5.4
AA
1.5
Fail
—
1.1
Fail
2.5
Fail
4.7
AA
1.3
Fail
1.1
Fail
—
2.2
Fail
2.1
Fail
1.7
Fail
2.5
Fail
2.2
Fail
—
White BG
8.5AAA
2.3Fail
1.6Fail
1.8Fail
4.0AA Large
Black BG
2.5Fail
9.0AAA
13.2AAA
11.6AAA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

59585A
9B9BD7
C5C5DC
A4A5EF
7070B5

Deuteranopia

606954
9998D4
C4C2DB
A19CEC
6F6EB1

Tritanopia

874844
91CCC9
BDD9D8
8DE5E2
69A7A3

Achromatopsia

434343
A8A8A8
CCCCCC
BABABA
7E7E7E

Shades & Tints Shades & Tints

#8D1470

Dark
Light

#90A9E6

Dark
Light

#BCD0E0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8d1470;
  --color-2: #90a9e6;
  --color-3: #bcd0e0;
  --color-4: #8ac6fc;
  --color-5: #687bc8;
}

SCSS

$color-1: #8d1470;
$color-2: #90a9e6;
$color-3: #bcd0e0;
$color-4: #8ac6fc;
$color-5: #687bc8;

TAILWIND

colors: {
  'brand-1': '#8d1470',
  'brand-2': '#90a9e6',
  'brand-3': '#bcd0e0',
  'brand-4': '#8ac6fc',
  'brand-5': '#687bc8',
}

RGB Array

[141, 20, 112], [144, 169, 230], [188, 208, 224], [138, 198, 252], [104, 123, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8D1470, #90A9E6, #BCD0E0, #8AC6FC, #687BC8 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: #8d1470; --color-2: #90a9e6; --color-3: #bcd0e0; --color-4: #8ac6fc; --color-5: #687bc8. 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