← Back to Editor

#8CD2EB · #4360A6 · #9E89AA · #D9CA93 · #FFD4CB

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#8CD2EB

Sky Blue · SkyBlue · Lake Green

HEX
#8CD2EB
RGB
rgb(140, 210, 235)
HSL
hsl(196, 70%, 74%)
HSB
hsb(196, 40%, 92%)
CMYK
cmyk(40%, 11%, 0%, 8%)
Oklch
oklch(82.6% 0.078 222.5)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#4360A6

Indigo · SteelBlue · Navy Blue

HEX
#4360A6
RGB
rgb(67, 96, 166)
HSL
hsl(222, 42%, 46%)
HSB
hsb(222, 60%, 65%)
CMYK
cmyk(60%, 42%, 0%, 35%)
Oklch
oklch(50.1% 0.117 265.5)

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

#9E89AA

Dark Plum · DarkGray · Violet

HEX
#9E89AA
RGB
rgb(158, 137, 170)
HSL
hsl(278, 16%, 60%)
HSB
hsb(278, 19%, 67%)
CMYK
cmyk(7%, 19%, 0%, 33%)
Oklch
oklch(66.0% 0.054 313.2)

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

#D9CA93

Goose Yellow · BurlyWood · Sunflower

HEX
#D9CA93
RGB
rgb(217, 202, 147)
HSL
hsl(47, 48%, 71%)
HSB
hsb(47, 32%, 85%)
CMYK
cmyk(0%, 7%, 32%, 15%)
Oklch
oklch(83.8% 0.074 94.7)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#FFD4CB

Peach Pink · Bisque · Cherry Blossom

HEX
#FFD4CB
RGB
rgb(255, 212, 203)
HSL
hsl(10, 100%, 90%)
HSB
hsb(10, 20%, 100%)
CMYK
cmyk(0%, 17%, 20%, 0%)
Oklch
oklch(90.4% 0.050 31.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8CD2EB
EBA78E

Analogous

8EEBD5
8CD2EB
8EA4EB

Triadic

8CD2EB
EB8ED2
D2EB8E

Split-Comp.

8CD2EB
EB8EA4
EBD58E

Tetradic

8CD2EB
D58EEB
EBA78E
A4EB8E

Contrast Matrix WCAG 2.1 Contrast

8CD2EB
4360A6
9E89AA
D9CA93
FFD4CB
—
3.6
AA Large
1.9
Fail
1.0
Fail
1.2
Fail
3.6
AA Large
—
1.9
Fail
3.7
AA Large
4.5
AA Large
1.9
Fail
1.9
Fail
—
1.9
Fail
2.3
Fail
1.0
Fail
3.7
AA Large
1.9
Fail
—
1.2
Fail
1.2
Fail
4.5
AA Large
2.3
Fail
1.2
Fail
—
White BG
1.7Fail
6.1AA
3.2AA Large
1.6Fail
1.4Fail
Black BG
12.5AAA
3.5AA Large
6.6AA
12.8AAA
15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAABE5
505095
9595A2
D3D2A0
ECECCD

Deuteranopia

A6A1E4
4E4C91
9698A0
D3D4A4
EFF2CE

Tritanopia

90E0DF
448885
9D9C9A
D8ABAD
FDCFCF

Achromatopsia

C0C0C0
5F5F5F
939393
C8C8C8
E0E0E0

Shades & Tints Shades & Tints

#8CD2EB

Dark
Light

#4360A6

Dark
Light

#9E89AA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8cd2eb;
  --color-2: #4360a6;
  --color-3: #9e89aa;
  --color-4: #d9ca93;
  --color-5: #ffd4cb;
}

SCSS

$color-1: #8cd2eb;
$color-2: #4360a6;
$color-3: #9e89aa;
$color-4: #d9ca93;
$color-5: #ffd4cb;

TAILWIND

colors: {
  'brand-1': '#8cd2eb',
  'brand-2': '#4360a6',
  'brand-3': '#9e89aa',
  'brand-4': '#d9ca93',
  'brand-5': '#ffd4cb',
}

RGB Array

[140, 210, 235], [67, 96, 166], [158, 137, 170], [217, 202, 147], [255, 212, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8CD2EB, #4360A6, #9E89AA, #D9CA93, #FFD4CB is ideal for: health products, baby brands, fresh-style blogs, 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: #8cd2eb; --color-2: #4360a6; --color-3: #9e89aa; --color-4: #d9ca93; --color-5: #ffd4cb. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 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