#D8E4DD + #CCE3DB + #BAE3DE + #9ADAE3 + #94C6E3 · 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

#D8E4DD

Celadon · LightGray · Mint Green

HEX

#D8E4DD

RGB

rgb(216, 228, 221)

HSL

hsl(145, 18%, 87%)

HSB

hsb(145, 5%, 89%)

CMYK

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

Oklch

oklch(90.8% 0.016 160.6)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#CCE3DB

Jade · LightGray · Mint Green

HEX

#CCE3DB

RGB

rgb(204, 227, 219)

HSL

hsl(159, 29%, 85%)

HSB

hsb(159, 10%, 89%)

CMYK

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

Oklch

oklch(89.7% 0.027 172.8)

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

#BAE3DE

Jade · LightBlue · Glacier Blue

HEX

#BAE3DE

RGB

rgb(186, 227, 222)

HSL

hsl(173, 42%, 81%)

HSB

hsb(173, 18%, 89%)

CMYK

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

Oklch

oklch(88.5% 0.043 187.3)

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

#9ADAE3

Sky Blue · LightBlue · Lake Green

HEX

#9ADAE3

RGB

rgb(154, 218, 227)

HSL

hsl(187, 57%, 75%)

HSB

hsb(187, 32%, 89%)

CMYK

cmyk(32%, 4%, 0%, 11%)

Oklch

oklch(84.8% 0.066 207.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#94C6E3

Sky Blue · SkyBlue · Cobalt Blue

HEX

#94C6E3

RGB

rgb(148, 198, 227)

HSL

hsl(202, 59%, 74%)

HSB

hsb(202, 35%, 89%)

CMYK

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

Oklch

oklch(80.2% 0.067 234.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8E4DD

E4D8DF

Analogous

D9E4D8

D8E4DD

D8E4E3

Triadic

D8E4DD

DDD8E4

E4DDD8

Split-Comp.

D8E4DD

E3D8E4

E4D8D9

Tetradic

D8E4DD

D8D9E4

E4D8DF

E4E3D8

Contrast Matrix WCAG 2.1 Contrast

D8E4DD	CCE3DB	BAE3DE	9ADAE3	94C6E3
—	1.0 Fail	1.1 Fail	1.2 Fail	1.4 Fail
1.0 Fail	—	1.0 Fail	1.2 Fail	1.4 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	1.3 Fail
1.2 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.4 Fail	1.4 Fail	1.3 Fail	1.2 Fail	—

White BG

1.3Fail

1.4Fail

1.6Fail

1.8Fail

Black BG

16.1AAA

15.6AAA

15.1AAA

13.5AAA

11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDDF

D6D6DD

CCCCDF

B6B6E1

AAAADC

Deuteranopia

DDDCDF

D5D3DD

C9C6DF

B2ADE0

A7A3DA

Tritanopia

D9E0E0

CDDEDF

BCE0E0

9DDFDF

97D6D5

Achromatopsia

E0E0E0

DBDBDB

D6D6D6

C8C8C8

BABABA

Shades & Tints Shades & Tints

#D8E4DD

Dark

Light

#CCE3DB

Dark

Light

#BAE3DE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8e4dd;
  --color-2: #cce3db;
  --color-3: #bae3de;
  --color-4: #9adae3;
  --color-5: #94c6e3;
}

SCSS

$color-1: #d8e4dd;
$color-2: #cce3db;
$color-3: #bae3de;
$color-4: #9adae3;
$color-5: #94c6e3;

TAILWIND

colors: {
  'brand-1': '#d8e4dd',
  'brand-2': '#cce3db',
  'brand-3': '#bae3de',
  'brand-4': '#9adae3',
  'brand-5': '#94c6e3',
}

RGB Array

[216, 228, 221], [204, 227, 219], [186, 227, 222], [154, 218, 227], [148, 198, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #D8E4DD, #CCE3DB, #BAE3DE, #9ADAE3, #94C6E3 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: #d8e4dd; --color-2: #cce3db; --color-3: #bae3de; --color-4: #9adae3; --color-5: #94c6e3. 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