← Back to Editor

#CADEE1 · #7DADB3 · #281B30 · #4A133F · #197280

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CADEE1

Sky Blue · LightGray · Glacier Blue

HEX
#CADEE1
RGB
rgb(202, 222, 225)
HSL
hsl(188, 28%, 84%)
HSB
hsb(188, 10%, 88%)
CMYK
cmyk(10%, 1%, 0%, 12%)
Oklch
oklch(88.7% 0.022 207.6)

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

#7DADB3

Slate Blue · CadetBlue · Lake Green

HEX
#7DADB3
RGB
rgb(125, 173, 179)
HSL
hsl(187, 26%, 60%)
HSB
hsb(187, 30%, 70%)
CMYK
cmyk(30%, 3%, 0%, 30%)
Oklch
oklch(71.6% 0.052 205.7)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#281B30

Dark Plum · DarkSlateGray · Dark Purple

HEX
#281B30
RGB
rgb(40, 27, 48)
HSL
hsl(277, 28%, 15%)
HSB
hsb(277, 44%, 19%)
CMYK
cmyk(17%, 44%, 0%, 81%)
Oklch
oklch(24.8% 0.043 311.9)

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

#4A133F

Rose Purple · DarkSlateGray · Dark Purple

HEX
#4A133F
RGB
rgb(74, 19, 63)
HSL
hsl(312, 59%, 18%)
HSB
hsb(312, 74%, 29%)
CMYK
cmyk(0%, 74%, 15%, 71%)
Oklch
oklch(29.7% 0.100 336.8)

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

#197280

Lake Blue · Teal · Mint Ice

HEX
#197280
RGB
rgb(25, 114, 128)
HSL
hsl(188, 67%, 30%)
HSB
hsb(188, 80%, 50%)
CMYK
cmyk(80%, 11%, 0%, 50%)
Oklch
oklch(50.9% 0.081 210.9)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CADEE1
E2CECB

Analogous

CBE2D9
CADEE1
CBD3E2

Triadic

CADEE1
E2CBDF
DFE2CB

Split-Comp.

CADEE1
E2CBD3
E2D9CB

Tetradic

CADEE1
D9CBE2
E2CECB
D3E2CB

Contrast Matrix WCAG 2.1 Contrast

CADEE1
7DADB3
281B30
4A133F
197280
—
1.8
Fail
11.7
AAA
10.3
AAA
4.0
AA Large
1.8
Fail
—
6.6
AA
5.8
AA
2.3
Fail
11.7
AAA
6.6
AA
—
1.1
Fail
2.9
Fail
10.3
AAA
5.8
AA
1.1
Fail
—
2.6
Fail
4.0
AA Large
2.3
Fail
2.9
Fail
2.6
Fail
—
White BG
1.4Fail
2.5Fail
16.3AAA
14.4AAA
5.6AA
Black BG
15.0AAA
8.5AAA
1.3Fail
1.5Fail
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D3E0
9292B2
22222B
323234
40407D

Deuteranopia

D2D0E0
8F8BB1
23242A
353A32
3A347C

Tritanopia

CBE0E0
7FB0B0
272726
472C2A
1D7A79

Achromatopsia

D8D8D8
9F9F9F
212121
282828
595959

Shades & Tints Shades & Tints

#CADEE1

Dark
Light

#7DADB3

Dark
Light

#281B30

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cadee1;
  --color-2: #7dadb3;
  --color-3: #281b30;
  --color-4: #4a133f;
  --color-5: #197280;
}

SCSS

$color-1: #cadee1;
$color-2: #7dadb3;
$color-3: #281b30;
$color-4: #4a133f;
$color-5: #197280;

TAILWIND

colors: {
  'brand-1': '#cadee1',
  'brand-2': '#7dadb3',
  'brand-3': '#281b30',
  'brand-4': '#4a133f',
  'brand-5': '#197280',
}

RGB Array

[202, 222, 225], [125, 173, 179], [40, 27, 48], [74, 19, 63], [25, 114, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #CADEE1, #7DADB3, #281B30, #4A133F, #197280 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: #cadee1; --color-2: #7dadb3; --color-3: #281b30; --color-4: #4a133f; --color-5: #197280. 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