← Back to Editor

#D9F9FB · #71D9E1 · #7197E1 · #8363D9 · #9420B4

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#D9F9FB

Sky Blue · Lavender · Glacier Blue

HEX
#D9F9FB
RGB
rgb(217, 249, 251)
HSL
hsl(184, 81%, 92%)
HSB
hsb(184, 14%, 98%)
CMYK
cmyk(14%, 1%, 0%, 2%)
Oklch
oklch(96.0% 0.033 201.2)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#71D9E1

Sky Blue · SkyBlue · Lake Green

HEX
#71D9E1
RGB
rgb(113, 217, 225)
HSL
hsl(184, 65%, 66%)
HSB
hsb(184, 50%, 88%)
CMYK
cmyk(50%, 4%, 0%, 12%)
Oklch
oklch(82.6% 0.097 202.1)

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

#7197E1

Azure · CornflowerBlue · Cobalt Blue

HEX
#7197E1
RGB
rgb(113, 151, 225)
HSL
hsl(220, 65%, 66%)
HSB
hsb(220, 50%, 88%)
CMYK
cmyk(50%, 33%, 0%, 12%)
Oklch
oklch(68.0% 0.118 262.9)

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

#8363D9

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#8363D9
RGB
rgb(131, 99, 217)
HSL
hsl(256, 61%, 62%)
HSB
hsb(256, 54%, 85%)
CMYK
cmyk(40%, 54%, 0%, 15%)
Oklch
oklch(58.9% 0.174 292.8)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#9420B4

Royal Purple · DarkOrchid · Violet

HEX
#9420B4
RGB
rgb(148, 32, 180)
HSL
hsl(287, 70%, 42%)
HSB
hsb(287, 82%, 71%)
CMYK
cmyk(18%, 82%, 0%, 29%)
Oklch
oklch(50.3% 0.222 317.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9F9FB
FBDCDA

Analogous

DAFBED
D9F9FB
DAE8FB

Triadic

D9F9FB
FBDAF9
F9FBDA

Split-Comp.

D9F9FB
FBDAE8
FBEDDA

Tetradic

D9F9FB
EDDAFB
FBDCDA
E8FBDA

Contrast Matrix WCAG 2.1 Contrast

D9F9FB
71D9E1
7197E1
8363D9
9420B4
—
1.5
Fail
2.6
Fail
4.0
AA Large
6.0
AA
1.5
Fail
—
1.8
Fail
2.7
Fail
4.1
AA Large
2.6
Fail
1.8
Fail
—
1.5
Fail
2.3
Fail
4.0
AA Large
2.7
Fail
1.5
Fail
—
1.5
Fail
6.0
AA
4.1
AA Large
2.3
Fail
1.5
Fail
—
White BG
1.1Fail
1.7Fail
2.9Fail
4.4AA Large
6.7AA
Black BG
18.9AAA
12.7AAA
7.2AAA
4.8AA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7FB
9E9FDF
8182CF
7575BC
626190

Deuteranopia

E5E3FA
9890DF
7F7CCB
7779B6
697188

Tritanopia

DBFAFA
76DEDD
73C1BE
81A6A1
8E746E

Achromatopsia

F0F0F0
BBBBBB
949494
7A7A7A
545454

Shades & Tints Shades & Tints

#D9F9FB

Dark
Light

#71D9E1

Dark
Light

#7197E1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9f9fb;
  --color-2: #71d9e1;
  --color-3: #7197e1;
  --color-4: #8363d9;
  --color-5: #9420b4;
}

SCSS

$color-1: #d9f9fb;
$color-2: #71d9e1;
$color-3: #7197e1;
$color-4: #8363d9;
$color-5: #9420b4;

TAILWIND

colors: {
  'brand-1': '#d9f9fb',
  'brand-2': '#71d9e1',
  'brand-3': '#7197e1',
  'brand-4': '#8363d9',
  'brand-5': '#9420b4',
}

RGB Array

[217, 249, 251], [113, 217, 225], [113, 151, 225], [131, 99, 217], [148, 32, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #D9F9FB, #71D9E1, #7197E1, #8363D9, #9420B4 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #d9f9fb; --color-2: #71d9e1; --color-3: #7197e1; --color-4: #8363d9; --color-5: #9420b4. 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 cool-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