#CAE3D8 + #CADCE3 + #CAD6E3 + #CAD0E3 + #CACAE3 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CAE3D8

Jade · LightGray · Mint Green

HEX

#CAE3D8

RGB

rgb(202, 227, 216)

HSL

hsl(154, 31%, 84%)

HSB

hsb(154, 11%, 89%)

CMYK

cmyk(11%, 0%, 5%, 11%)

Oklch

oklch(89.4% 0.030 167.4)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#CADCE3

Sky Blue · LightGray · Glacier Blue

HEX

#CADCE3

RGB

rgb(202, 220, 227)

HSL

hsl(197, 31%, 84%)

HSB

hsb(197, 11%, 89%)

CMYK

cmyk(11%, 3%, 0%, 11%)

Oklch

oklch(88.3% 0.022 223.0)

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

#CAD6E3

Azure · LightGray · Sky Blue

HEX

#CAD6E3

RGB

rgb(202, 214, 227)

HSL

hsl(211, 31%, 84%)

HSB

hsb(211, 11%, 89%)

CMYK

cmyk(11%, 6%, 0%, 11%)

Oklch

oklch(87.1% 0.022 250.2)

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

#CAD0E3

Azure · LightGray · Sky Blue

HEX

#CAD0E3

RGB

rgb(202, 208, 227)

HSL

hsl(226, 31%, 84%)

HSB

hsb(226, 11%, 89%)

CMYK

cmyk(11%, 8%, 0%, 11%)

Oklch

oklch(85.9% 0.027 271.8)

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

#CACAE3

Wisteria · LightGray · Sky Blue

HEX

#CACAE3

RGB

rgb(202, 202, 227)

HSL

hsl(240, 31%, 84%)

HSB

hsb(240, 11%, 89%)

CMYK

cmyk(11%, 11%, 0%, 11%)

Oklch

oklch(84.7% 0.035 285.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAE3D8

E3CAD5

Analogous

CAE3CB

CAE3D8

CAE1E3

Triadic

CAE3D8

D8CAE3

E3D8CA

Split-Comp.

CAE3D8

E3CAE1

E3CBCA

Tetradic

CAE3D8

CBCAE3

E3CAD5

E1E3CA

Contrast Matrix WCAG 2.1 Contrast

CAE3D8	CADCE3	CAD6E3	CAD0E3	CACAE3
—	1.0 Fail	1.1 Fail	1.1 Fail	1.2 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.1 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.2 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.4Fail

1.5Fail

1.6Fail

Black BG

15.5AAA

14.9AAA

14.2AAA

13.6AAA

13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5DB

D2D2E1

CFCFE0

CDCDDE

CACADD

Deuteranopia

D3D1DB

D1CFE1

CFCEDF

CCCCDD

CACADB

Tritanopia

CBDDDD

CBE0E0

CBDDDD

CADBDA

CAD8D7

Achromatopsia

DADADA

D7D7D7

D4D4D4

D0D0D0

CDCDCD

Shades & Tints Shades & Tints

#CAE3D8

Dark

Light

#CADCE3

Dark

Light

#CAD6E3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cae3d8;
  --color-2: #cadce3;
  --color-3: #cad6e3;
  --color-4: #cad0e3;
  --color-5: #cacae3;
}

SCSS

$color-1: #cae3d8;
$color-2: #cadce3;
$color-3: #cad6e3;
$color-4: #cad0e3;
$color-5: #cacae3;

TAILWIND

colors: {
  'brand-1': '#cae3d8',
  'brand-2': '#cadce3',
  'brand-3': '#cad6e3',
  'brand-4': '#cad0e3',
  'brand-5': '#cacae3',
}

RGB Array

[202, 227, 216], [202, 220, 227], [202, 214, 227], [202, 208, 227], [202, 202, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #CAE3D8, #CADCE3, #CAD6E3, #CAD0E3, #CACAE3 is ideal for: health products, baby brands, fresh-style blogs. 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: #cae3d8; --color-2: #cadce3; --color-3: #cad6e3; --color-4: #cad0e3; --color-5: #cacae3. 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. 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