#CCD0CD + #BCD8D6 + #C7D1C3 + #DAC6B4 + #FBB9AB · 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

#CCD0CD

Silver Gray · LightGray · Pearl Gray

HEX

#CCD0CD

RGB

rgb(204, 208, 205)

HSL

hsl(135, 4%, 81%)

HSB

hsb(135, 2%, 82%)

CMYK

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

Oklch

oklch(85.4% 0.006 153.8)

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

#BCD8D6

Jade · LightBlue · Glacier Blue

HEX

#BCD8D6

RGB

rgb(188, 216, 214)

HSL

hsl(176, 26%, 79%)

HSB

hsb(176, 13%, 85%)

CMYK

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

Oklch

oklch(86.1% 0.030 191.4)

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

#C7D1C3

Celadon · Silver · Apple Green

HEX

#C7D1C3

RGB

rgb(199, 209, 195)

HSL

hsl(103, 13%, 79%)

HSB

hsb(103, 7%, 82%)

CMYK

cmyk(5%, 0%, 7%, 18%)

Oklch

oklch(84.9% 0.022 136.6)

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

#DAC6B4

Apricot · Silver · Peach Orange

HEX

#DAC6B4

RGB

rgb(218, 198, 180)

HSL

hsl(28, 34%, 78%)

HSB

hsb(28, 17%, 85%)

CMYK

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

Oklch

oklch(83.8% 0.033 64.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FBB9AB

Peach Pink · LightPink · Cherry Blossom

HEX

#FBB9AB

RGB

rgb(251, 185, 171)

HSL

hsl(11, 91%, 83%)

HSB

hsb(11, 32%, 98%)

CMYK

cmyk(0%, 26%, 32%, 2%)

Oklch

oklch(84.3% 0.080 32.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCD0CD

D0CDD0

Analogous

CED0CD

CCD0CD

CDD0D0

Triadic

CCD0CD

CECDD0

D0CECD

Split-Comp.

CCD0CD

D0CDD0

D0CDCE

Tetradic

CCD0CD

CDCED0

D0CDD0

D0D0CD

Contrast Matrix WCAG 2.1 Contrast

CCD0CD	BCD8D6	C7D1C3	DAC6B4	FBB9AB
—	1.0 Fail	1.0 Fail	1.1 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.1 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.6Fail

1.5Fail

1.6Fail

1.7Fail

Black BG

13.5AAA

13.9AAA

13.3AAA

12.7AAA

12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECECE

C8C8D6

CBCBC6

D1D1B8

DEDEAE

Deuteranopia

CECDCE

C7C4D7

CBCAC7

D3D4B9

E2E7AF

Tritanopia

CCCECE

BDD7D7

C7C9CA

D9BCBD

F8B1B2

Achromatopsia

CECECE

CFCFCF

CCCCCC

CACACA

CBCBCB

Shades & Tints Shades & Tints

#CCD0CD

Dark

Light

#BCD8D6

Dark

Light

#C7D1C3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccd0cd;
  --color-2: #bcd8d6;
  --color-3: #c7d1c3;
  --color-4: #dac6b4;
  --color-5: #fbb9ab;
}

SCSS

$color-1: #ccd0cd;
$color-2: #bcd8d6;
$color-3: #c7d1c3;
$color-4: #dac6b4;
$color-5: #fbb9ab;

TAILWIND

colors: {
  'brand-1': '#ccd0cd',
  'brand-2': '#bcd8d6',
  'brand-3': '#c7d1c3',
  'brand-4': '#dac6b4',
  'brand-5': '#fbb9ab',
}

RGB Array

[204, 208, 205], [188, 216, 214], [199, 209, 195], [218, 198, 180], [251, 185, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #CCD0CD, #BCD8D6, #C7D1C3, #DAC6B4, #FBB9AB 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: #ccd0cd; --color-2: #bcd8d6; --color-3: #c7d1c3; --color-4: #dac6b4; --color-5: #fbb9ab. 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