← Back to Editor

#CADBF5 · #B7C3F5 · #8C99CD · #5E7098 · #151A2D

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CADBF5

Azure · Lavender · Sky Blue

HEX
#CADBF5
RGB
rgb(202, 219, 245)
HSL
hsl(216, 68%, 88%)
HSB
hsb(216, 18%, 96%)
CMYK
cmyk(18%, 11%, 0%, 4%)
Oklch
oklch(88.7% 0.040 258.8)

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

#B7C3F5

Azure · LightSteelBlue · Sky Blue

HEX
#B7C3F5
RGB
rgb(183, 195, 245)
HSL
hsl(228, 76%, 84%)
HSB
hsb(228, 25%, 96%)
CMYK
cmyk(25%, 20%, 0%, 4%)
Oklch
oklch(82.5% 0.072 274.2)

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

#8C99CD

Azure · DarkGray · Cobalt Blue

HEX
#8C99CD
RGB
rgb(140, 153, 205)
HSL
hsl(228, 39%, 68%)
HSB
hsb(228, 32%, 80%)
CMYK
cmyk(32%, 25%, 0%, 20%)
Oklch
oklch(69.2% 0.078 273.4)

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

#5E7098

Indigo · SlateGray · Navy Blue

HEX
#5E7098
RGB
rgb(94, 112, 152)
HSL
hsl(221, 24%, 48%)
HSB
hsb(221, 38%, 60%)
CMYK
cmyk(38%, 26%, 0%, 40%)
Oklch
oklch(54.7% 0.066 265.6)

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

#151A2D

Indigo · Black · Deep Sea Blue

HEX
#151A2D
RGB
rgb(21, 26, 45)
HSL
hsl(228, 36%, 13%)
HSB
hsb(228, 53%, 18%)
CMYK
cmyk(53%, 42%, 0%, 82%)
Oklch
oklch(22.3% 0.038 271.8)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CADBF5
F5E5CC

Analogous

CCF1F5
CADBF5
D0CCF5

Triadic

CADBF5
F5CCDC
DCF5CC

Split-Comp.

CADBF5
F5D0CC
F1F5CC

Tetradic

CADBF5
F5CCF1
F5E5CC
CCF5D0

Contrast Matrix WCAG 2.1 Contrast

CADBF5
B7C3F5
8C99CD
5E7098
151A2D
—
1.2
Fail
2.0
Fail
3.5
AA Large
12.3
AAA
1.2
Fail
—
1.6
Fail
2.9
Fail
10.0
AAA
2.0
Fail
1.6
Fail
—
1.8
Fail
6.2
AA
3.5
AA Large
2.9
Fail
1.8
Fail
—
3.5
AA Large
12.3
AAA
10.0
AAA
6.2
AA
3.5
AA Large
—
White BG
1.4Fail
1.7Fail
2.8Fail
4.9AA
17.2AAA
Black BG
15.0AAA
12.1AAA
7.6AAA
4.2AA Large
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D2EF
BCBCE9
9292C0
66668E
171728

Deuteranopia

D0CFED
BCBBE6
9190BD
65638C
171727

Tritanopia

CBEAE9
B8DFDD
8DB6B4
5F8785
152524

Achromatopsia

D9D9D9
C5C5C5
9B9B9B
6F6F6F
1B1B1B

Shades & Tints Shades & Tints

#CADBF5

Dark
Light

#B7C3F5

Dark
Light

#8C99CD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cadbf5;
  --color-2: #b7c3f5;
  --color-3: #8c99cd;
  --color-4: #5e7098;
  --color-5: #151a2d;
}

SCSS

$color-1: #cadbf5;
$color-2: #b7c3f5;
$color-3: #8c99cd;
$color-4: #5e7098;
$color-5: #151a2d;

TAILWIND

colors: {
  'brand-1': '#cadbf5',
  'brand-2': '#b7c3f5',
  'brand-3': '#8c99cd',
  'brand-4': '#5e7098',
  'brand-5': '#151a2d',
}

RGB Array

[202, 219, 245], [183, 195, 245], [140, 153, 205], [94, 112, 152], [21, 26, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #CADBF5, #B7C3F5, #8C99CD, #5E7098, #151A2D is ideal for: 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: #cadbf5; --color-2: #b7c3f5; --color-3: #8c99cd; --color-4: #5e7098; --color-5: #151a2d. 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 cool-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