#CDE8D8 + #96BCE3 + #B07CCA + #CC55A1 + #F16F91 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#CDE8D8

Celadon · LightGray · Mint Green

HEX

#CDE8D8

RGB

rgb(205, 232, 216)

HSL

hsl(144, 37%, 86%)

HSB

hsb(144, 12%, 91%)

CMYK

cmyk(12%, 0%, 7%, 9%)

Oklch

oklch(90.7% 0.036 159.6)

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

#96BCE3

Azure · SkyBlue · Cobalt Blue

HEX

#96BCE3

RGB

rgb(150, 188, 227)

HSL

hsl(210, 58%, 74%)

HSB

hsb(210, 34%, 89%)

CMYK

cmyk(34%, 17%, 0%, 11%)

Oklch

oklch(78.1% 0.069 249.4)

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

#B07CCA

Lilac · MediumOrchid · Lilac Purple

HEX

#B07CCA

RGB

rgb(176, 124, 202)

HSL

hsl(280, 42%, 64%)

HSB

hsb(280, 39%, 79%)

CMYK

cmyk(13%, 39%, 0%, 21%)

Oklch

oklch(66.7% 0.125 313.9)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#CC55A1

Rose Purple · MediumOrchid · Rose Pink

HEX

#CC55A1

RGB

rgb(204, 85, 161)

HSL

hsl(322, 54%, 57%)

HSB

hsb(322, 58%, 80%)

CMYK

cmyk(0%, 58%, 21%, 20%)

Oklch

oklch(62.5% 0.173 344.0)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#F16F91

Rouge · LightCoral · Rose Pink

HEX

#F16F91

RGB

rgb(241, 111, 145)

HSL

hsl(344, 82%, 69%)

HSB

hsb(344, 54%, 95%)

CMYK

cmyk(0%, 54%, 40%, 5%)

Oklch

oklch(70.6% 0.163 5.8)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDE8D8

E9CEDE

Analogous

D1E9CE

CDE8D8

CEE9E6

Triadic

CDE8D8

D9CEE9

E9D9CE

Split-Comp.

CDE8D8

E6CEE9

E9CED1

Tetradic

CDE8D8

CED1E9

E9CEDE

E9E6CE

Contrast Matrix WCAG 2.1 Contrast

CDE8D8	96BCE3	B07CCA	CC55A1	F16F91
—	1.5 Fail	2.5 Fail	3.0 Fail	2.2 Fail
1.5 Fail	—	1.6 Fail	2.0 Fail	1.4 Fail
2.5 Fail	1.6 Fail	—	1.2 Fail	1.1 Fail
3.0 Fail	2.0 Fail	1.2 Fail	—	1.4 Fail
2.2 Fail	1.4 Fail	1.1 Fail	1.4 Fail	—

White BG

1.3Fail

2.0Fail

3.2AA Large

3.9AA Large

2.8Fail

Black BG

16.1AAA

10.6AAA

6.6AA

5.4AA

7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D9DC

A6A7DA

9999B7

98978F

B9B889

Deuteranopia

D7D5DD

A4A1D7

9DA0B3

9FA88A

C0CA87

Tritanopia

CEDFE0

98D2D0

ADA8A5

C6807D

EB8281

Achromatopsia

DEDEDE

B5B5B5

949494

818181

9A9A9A

Shades & Tints Shades & Tints

#CDE8D8

Dark

Light

#96BCE3

Dark

Light

#B07CCA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cde8d8;
  --color-2: #96bce3;
  --color-3: #b07cca;
  --color-4: #cc55a1;
  --color-5: #f16f91;
}

SCSS

$color-1: #cde8d8;
$color-2: #96bce3;
$color-3: #b07cca;
$color-4: #cc55a1;
$color-5: #f16f91;

TAILWIND

colors: {
  'brand-1': '#cde8d8',
  'brand-2': '#96bce3',
  'brand-3': '#b07cca',
  'brand-4': '#cc55a1',
  'brand-5': '#f16f91',
}

RGB Array

[205, 232, 216], [150, 188, 227], [176, 124, 202], [204, 85, 161], [241, 111, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #CDE8D8, #96BCE3, #B07CCA, #CC55A1, #F16F91 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: #cde8d8; --color-2: #96bce3; --color-3: #b07cca; --color-4: #cc55a1; --color-5: #f16f91. 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