#F0F2FF + #E6E6E6 + #D3D3DE + #C3CAD9 + #B6C6DE · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0F2FF

Azure · Lavender · Sky Blue

HEX

#F0F2FF

RGB

rgb(240, 242, 255)

HSL

hsl(232, 100%, 97%)

HSB

hsb(232, 6%, 100%)

CMYK

cmyk(6%, 5%, 0%, 0%)

Oklch

oklch(96.3% 0.018 279.1)

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

#E6E6E6

Plain White · Lavender · Cloud White

HEX

#E6E6E6

RGB

rgb(230, 230, 230)

HSL

hsl(0, 0%, 90%)

HSB

hsb(0, 0%, 90%)

CMYK

cmyk(0%, 0%, 0%, 10%)

Oklch

oklch(92.5% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#D3D3DE

Wisteria · LightGray · Sky Blue

HEX

#D3D3DE

RGB

rgb(211, 211, 222)

HSL

hsl(240, 14%, 85%)

HSB

hsb(240, 5%, 87%)

CMYK

cmyk(5%, 5%, 0%, 13%)

Oklch

oklch(87.0% 0.015 286.1)

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

#C3CAD9

Azure · LightGray · Sky Blue

HEX

#C3CAD9

RGB

rgb(195, 202, 217)

HSL

hsl(221, 22%, 81%)

HSB

hsb(221, 10%, 85%)

CMYK

cmyk(10%, 7%, 0%, 15%)

Oklch

oklch(83.8% 0.022 265.7)

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

#B6C6DE

Azure · LightSteelBlue · Cobalt Blue

HEX

#B6C6DE

RGB

rgb(182, 198, 222)

HSL

hsl(216, 38%, 79%)

HSB

hsb(216, 18%, 87%)

CMYK

cmyk(18%, 11%, 0%, 13%)

Oklch

oklch(82.2% 0.038 258.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0F2FF

FFFDF0

Analogous

F0F9FF

F0F2FF

F5F0FF

Triadic

F0F2FF

FFF0F2

F2FFF0

Split-Comp.

F0F2FF

FFF5F0

F9FFF0

Tetradic

F0F2FF

FFF0F9

FFFDF0

F0FFF5

Contrast Matrix WCAG 2.1 Contrast

F0F2FF	E6E6E6	D3D3DE	C3CAD9	B6C6DE
—	1.1 Fail	1.3 Fail	1.5 Fail	1.6 Fail
1.1 Fail	—	1.2 Fail	1.3 Fail	1.4 Fail
1.3 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
1.5 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.6 Fail	1.4 Fail	1.2 Fail	1.1 Fail	—

White BG

1.1Fail

1.2Fail

1.5Fail

1.6Fail

1.7Fail

Black BG

18.8AAA

16.8AAA

14.1AAA

12.8AAA

12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1FC

E6E6E6

D3D3DB

C6C6D5

BDBDD8

Deuteranopia

F1F1FB

E6E6E6

D3D3DB

C6C5D4

BCBBD7

Tritanopia

F0F9F9

E6E6E6

D3D9D9

C3D3D2

B7D4D3

Achromatopsia

F3F3F3

E6E6E6

D4D4D4

CACACA

C4C4C4

Shades & Tints Shades & Tints

#F0F2FF

Dark

Light

#E6E6E6

Dark

Light

#D3D3DE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0f2ff;
  --color-2: #e6e6e6;
  --color-3: #d3d3de;
  --color-4: #c3cad9;
  --color-5: #b6c6de;
}

SCSS

$color-1: #f0f2ff;
$color-2: #e6e6e6;
$color-3: #d3d3de;
$color-4: #c3cad9;
$color-5: #b6c6de;

TAILWIND

colors: {
  'brand-1': '#f0f2ff',
  'brand-2': '#e6e6e6',
  'brand-3': '#d3d3de',
  'brand-4': '#c3cad9',
  'brand-5': '#b6c6de',
}

RGB Array

[240, 242, 255], [230, 230, 230], [211, 211, 222], [195, 202, 217], [182, 198, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #F0F2FF, #E6E6E6, #D3D3DE, #C3CAD9, #B6C6DE 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: #f0f2ff; --color-2: #e6e6e6; --color-3: #d3d3de; --color-4: #c3cad9; --color-5: #b6c6de. 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