#CCD9D9 + #ADD9D4 + #B8C6D4 + #CBB0C2 + #FFB8CE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CCD9D9

Sky Blue · LightGray · Glacier Blue

HEX

#CCD9D9

RGB

rgb(204, 217, 217)

HSL

hsl(180, 15%, 83%)

HSB

hsb(180, 6%, 85%)

CMYK

cmyk(6%, 0%, 0%, 15%)

Oklch

oklch(87.5% 0.014 196.9)

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

#ADD9D4

Jade · LightBlue · Glacier Blue

HEX

#ADD9D4

RGB

rgb(173, 217, 212)

HSL

hsl(173, 37%, 76%)

HSB

hsb(173, 20%, 85%)

CMYK

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

Oklch

oklch(85.3% 0.046 187.8)

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

#B8C6D4

Azure · LightSteelBlue · Cobalt Blue

HEX

#B8C6D4

RGB

rgb(184, 198, 212)

HSL

hsl(210, 25%, 78%)

HSB

hsb(210, 13%, 83%)

CMYK

cmyk(13%, 7%, 0%, 17%)

Oklch

oklch(82.0% 0.025 248.1)

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

#CBB0C2

Mauve · Silver · Rose Pink

HEX

#CBB0C2

RGB

rgb(203, 176, 194)

HSL

hsl(320, 21%, 74%)

HSB

hsb(320, 13%, 80%)

CMYK

cmyk(0%, 13%, 4%, 20%)

Oklch

oklch(78.6% 0.039 338.2)

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

#FFB8CE

Rouge · Pink · Cherry Blossom

HEX

#FFB8CE

RGB

rgb(255, 184, 206)

HSL

hsl(341, 100%, 86%)

HSB

hsb(341, 28%, 100%)

CMYK

cmyk(0%, 28%, 19%, 0%)

Oklch

oklch(85.5% 0.086 358.8)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCD9D9

DACDCD

Analogous

CDDAD4

CCD9D9

CDD4DA

Triadic

CCD9D9

DACDDA

DADACD

Split-Comp.

CCD9D9

DACDD4

DAD4CD

Tetradic

CCD9D9

D4CDDA

DACDCD

D4DACD

Contrast Matrix WCAG 2.1 Contrast

CCD9D9	ADD9D4	B8C6D4	CBB0C2	FFB8CE
—	1.1 Fail	1.2 Fail	1.4 Fail	1.1 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.1 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.4 Fail	1.3 Fail	1.1 Fail	—	1.2 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.2 Fail	—

White BG

1.4Fail

1.5Fail

1.7Fail

2.0Fail

1.6Fail

Black BG

14.5AAA

13.7AAA

12.1AAA

10.5AAA

13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2D9

C0C0D5

BEBED1

BFBFBE

E0E0C9

Deuteranopia

D1D0D9

BEBAD5

BDBCD0

C1C3BD

E4EAC7

Tritanopia

CDD9D9

AFD6D6

B9CECD

CABAB9

FBC4C4

Achromatopsia

D5D5D5

CBCBCB

C3C3C3

BABABA

D0D0D0

Shades & Tints Shades & Tints

#CCD9D9

Dark

Light

#ADD9D4

Dark

Light

#B8C6D4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccd9d9;
  --color-2: #add9d4;
  --color-3: #b8c6d4;
  --color-4: #cbb0c2;
  --color-5: #ffb8ce;
}

SCSS

$color-1: #ccd9d9;
$color-2: #add9d4;
$color-3: #b8c6d4;
$color-4: #cbb0c2;
$color-5: #ffb8ce;

TAILWIND

colors: {
  'brand-1': '#ccd9d9',
  'brand-2': '#add9d4',
  'brand-3': '#b8c6d4',
  'brand-4': '#cbb0c2',
  'brand-5': '#ffb8ce',
}

RGB Array

[204, 217, 217], [173, 217, 212], [184, 198, 212], [203, 176, 194], [255, 184, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCD9D9, #ADD9D4, #B8C6D4, #CBB0C2, #FFB8CE 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: #ccd9d9; --color-2: #add9d4; --color-3: #b8c6d4; --color-4: #cbb0c2; --color-5: #ffb8ce. 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 general-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