#C8E0DE + #BDDADE + #C1D4E0 + #C1C9E0 + #C9C1E0 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#C8E0DE

Jade · LightGray · Glacier Blue

HEX

#C8E0DE

RGB

rgb(200, 224, 222)

HSL

hsl(175, 28%, 83%)

HSB

hsb(175, 11%, 88%)

CMYK

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

Oklch

oklch(88.8% 0.026 190.6)

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

#BDDADE

Sky Blue · LightBlue · Glacier Blue

HEX

#BDDADE

RGB

rgb(189, 218, 222)

HSL

hsl(187, 33%, 81%)

HSB

hsb(187, 15%, 87%)

CMYK

cmyk(15%, 2%, 0%, 13%)

Oklch

oklch(86.8% 0.031 206.7)

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

#C1D4E0

Sky Blue · LightBlue · Sky Blue

HEX

#C1D4E0

RGB

rgb(193, 212, 224)

HSL

hsl(203, 33%, 82%)

HSB

hsb(203, 14%, 88%)

CMYK

cmyk(14%, 5%, 0%, 12%)

Oklch

oklch(85.9% 0.026 235.4)

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

#C1C9E0

Azure · LightSteelBlue · Sky Blue

HEX

#C1C9E0

RGB

rgb(193, 201, 224)

HSL

hsl(225, 33%, 82%)

HSB

hsb(225, 14%, 88%)

CMYK

cmyk(14%, 10%, 0%, 12%)

Oklch

oklch(83.7% 0.033 270.4)

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

#C9C1E0

Wisteria · LightGray · Sky Blue

HEX

#C9C1E0

RGB

rgb(201, 193, 224)

HSL

hsl(255, 33%, 82%)

HSB

hsb(255, 14%, 88%)

CMYK

cmyk(10%, 14%, 0%, 12%)

Oklch

oklch(82.7% 0.044 297.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8E0DE

E0C8CA

Analogous

C8E0D2

C8E0DE

C8D6E0

Triadic

C8E0DE

DEC8E0

E0DEC8

Split-Comp.

C8E0DE

E0C8D6

E0D2C8

Tetradic

C8E0DE

D2C8E0

E0C8CA

D6E0C8

Contrast Matrix WCAG 2.1 Contrast

C8E0DE	BDDADE	C1D4E0	C1C9E0	C9C1E0
—	1.1 Fail	1.1 Fail	1.2 Fail	1.2 Fail
1.1 Fail	—	1.0 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.0 Fail
1.2 Fail	1.2 Fail	1.1 Fail	1.0 Fail	—

White BG

1.4Fail

1.5Fail

1.7Fail

Black BG

15.2AAA

14.2AAA

13.8AAA

12.7AAA

12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D3DE

CACADD

C9C9DD

C4C5DA

C6C5D8

Deuteranopia

D1CFDF

C8C6DD

C8C7DC

C4C3D9

C6C7D7

Tritanopia

C9DFDF

BEDCDC

C2DBDA

C1D6D5

C9D3D1

Achromatopsia

D9D9D9

D2D2D2

D0D0D0

C9C9C9

C7C7C7

Shades & Tints Shades & Tints

#C8E0DE

Dark

Light

#BDDADE

Dark

Light

#C1D4E0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8e0de;
  --color-2: #bddade;
  --color-3: #c1d4e0;
  --color-4: #c1c9e0;
  --color-5: #c9c1e0;
}

SCSS

$color-1: #c8e0de;
$color-2: #bddade;
$color-3: #c1d4e0;
$color-4: #c1c9e0;
$color-5: #c9c1e0;

TAILWIND

colors: {
  'brand-1': '#c8e0de',
  'brand-2': '#bddade',
  'brand-3': '#c1d4e0',
  'brand-4': '#c1c9e0',
  'brand-5': '#c9c1e0',
}

RGB Array

[200, 224, 222], [189, 218, 222], [193, 212, 224], [193, 201, 224], [201, 193, 224]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #C8E0DE, #BDDADE, #C1D4E0, #C1C9E0, #C9C1E0 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: #c8e0de; --color-2: #bddade; --color-3: #c1d4e0; --color-4: #c1c9e0; --color-5: #c9c1e0. 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 pastel-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