#B0C1D4 + #D2D9D8 + #CCE6E3 + #C7FFF9 + #A7FCF4 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B0C1D4

Azure · LightSteelBlue · Cobalt Blue

HEX

#B0C1D4

RGB

rgb(176, 193, 212)

HSL

hsl(212, 30%, 76%)

HSB

hsb(212, 17%, 83%)

CMYK

cmyk(17%, 9%, 0%, 17%)

Oklch

oklch(80.4% 0.033 251.2)

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

#D2D9D8

Jade · LightGray · Pearl Gray

HEX

#D2D9D8

RGB

rgb(210, 217, 216)

HSL

hsl(171, 8%, 84%)

HSB

hsb(171, 3%, 85%)

CMYK

cmyk(3%, 0%, 0%, 15%)

Oklch

oklch(88.0% 0.008 186.9)

Traditional「Jade」· Paint「Pearl Gray」· Creative Silver Lining

#CCE6E3

Jade · LightGray · Glacier Blue

HEX

#CCE6E3

RGB

rgb(204, 230, 227)

HSL

hsl(173, 34%, 85%)

HSB

hsb(173, 11%, 90%)

CMYK

cmyk(11%, 0%, 1%, 10%)

Oklch

oklch(90.5% 0.028 188.3)

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

#C7FFF9

Jade · Lavender · Glacier Blue

HEX

#C7FFF9

RGB

rgb(199, 255, 249)

HSL

hsl(174, 100%, 89%)

HSB

hsb(174, 22%, 100%)

CMYK

cmyk(22%, 0%, 2%, 0%)

Oklch

oklch(96.0% 0.057 188.1)

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

#A7FCF4

Jade · LightBlue · Glacier Blue

HEX

#A7FCF4

RGB

rgb(167, 252, 244)

HSL

hsl(174, 93%, 82%)

HSB

hsb(174, 34%, 99%)

CMYK

cmyk(34%, 0%, 3%, 1%)

Oklch

oklch(93.5% 0.083 188.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0C1D4

D4C3AF

Analogous

AFD3D4

B0C1D4

B1AFD4

Triadic

B0C1D4

D4AFC1

C1D4AF

Split-Comp.

B0C1D4

D4B1AF

D3D4AF

Tetradic

B0C1D4

D4AFD3

D4C3AF

AFD4B1

Contrast Matrix WCAG 2.1 Contrast

B0C1D4	D2D9D8	CCE6E3	C7FFF9	A7FCF4
—	1.3 Fail	1.4 Fail	1.7 Fail	1.6 Fail
1.3 Fail	—	1.1 Fail	1.3 Fail	1.2 Fail
1.4 Fail	1.1 Fail	—	1.2 Fail	1.1 Fail
1.7 Fail	1.3 Fail	1.2 Fail	—	1.1 Fail
1.6 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.8Fail

1.4Fail

1.3Fail

1.1Fail

1.2Fail

Black BG

11.4AAA

14.7AAA

16.0AAA

19.1AAA

17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B8CF

D5D5D8

D7D7E4

DFE0FA

CCCDF6

Deuteranopia

B6B5CE

D5D4D8

D6D4E4

DCD8FB

C7C1F6

Tritanopia

B1CCCB

D2D8D8

CDE4E4

CAFCFC

ABF7F8

Achromatopsia

BEBEBE

D7D7D7

DEDEDE

EEEEEE

E2E2E2

Shades & Tints Shades & Tints

#B0C1D4

Dark

Light

#D2D9D8

Dark

Light

#CCE6E3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0c1d4;
  --color-2: #d2d9d8;
  --color-3: #cce6e3;
  --color-4: #c7fff9;
  --color-5: #a7fcf4;
}

SCSS

$color-1: #b0c1d4;
$color-2: #d2d9d8;
$color-3: #cce6e3;
$color-4: #c7fff9;
$color-5: #a7fcf4;

TAILWIND

colors: {
  'brand-1': '#b0c1d4',
  'brand-2': '#d2d9d8',
  'brand-3': '#cce6e3',
  'brand-4': '#c7fff9',
  'brand-5': '#a7fcf4',
}

RGB Array

[176, 193, 212], [210, 217, 216], [204, 230, 227], [199, 255, 249], [167, 252, 244]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #B0C1D4, #D2D9D8, #CCE6E3, #C7FFF9, #A7FCF4 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: #b0c1d4; --color-2: #d2d9d8; --color-3: #cce6e3; --color-4: #c7fff9; --color-5: #a7fcf4. 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