#BBD0D0 + #CCD0D0 + #DDD0D0 + #EED0D0 + #FFD0D0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BBD0D0

Sky Blue · LightSteelBlue · Glacier Blue

HEX

#BBD0D0

RGB

rgb(187, 208, 208)

HSL

hsl(180, 18%, 77%)

HSB

hsb(180, 10%, 82%)

CMYK

cmyk(10%, 0%, 0%, 18%)

Oklch

oklch(84.2% 0.023 196.7)

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

#CCD0D0

Silver Gray · LightGray · Pearl Gray

HEX

#CCD0D0

RGB

rgb(204, 208, 208)

HSL

hsl(180, 4%, 81%)

HSB

hsb(180, 2%, 82%)

CMYK

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

Oklch

oklch(85.4% 0.004 197.1)

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

#DDD0D0

Peach Pink · LightGray · Cherry Blossom

HEX

#DDD0D0

RGB

rgb(221, 208, 208)

HSL

hsl(0, 16%, 84%)

HSB

hsb(0, 6%, 87%)

CMYK

cmyk(0%, 6%, 6%, 13%)

Oklch

oklch(86.8% 0.014 17.4)

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

#EED0D0

Peach Pink · Pink · Cherry Blossom

HEX

#EED0D0

RGB

rgb(238, 208, 208)

HSL

hsl(0, 47%, 87%)

HSB

hsb(0, 13%, 93%)

CMYK

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

Oklch

oklch(88.3% 0.034 17.8)

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

#FFD0D0

Peach Pink · Pink · Cherry Blossom

HEX

#FFD0D0

RGB

rgb(255, 208, 208)

HSL

hsl(0, 100%, 91%)

HSB

hsb(0, 18%, 100%)

CMYK

cmyk(0%, 18%, 18%, 0%)

Oklch

oklch(89.8% 0.053 18.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBD0D0

CFBABA

Analogous

BACFC4

BBD0D0

BAC4CF

Triadic

BBD0D0

CFBACF

CFCFBA

Split-Comp.

BBD0D0

CFBAC4

CFC4BA

Tetradic

BBD0D0

C4BACF

CFBABA

C4CFBA

Contrast Matrix WCAG 2.1 Contrast

BBD0D0	CCD0D0	DDD0D0	EED0D0	FFD0D0
—	1.0 Fail	1.1 Fail	1.1 Fail	1.2 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	—	1.0 Fail
1.2 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.6Fail

1.5Fail

1.4Fail

Black BG

13.0AAA

13.5AAA

14.0AAA

14.6AAA

15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C4D0

CECED0

D7D7D0

E1E1D0

EBEAD0

Deuteranopia

C3C1D0

CECDD0

D8D9D0

E3E5D0

EDF1D0

Tritanopia

BCD0D0

CCD0D0

DCD0D0

EDD0D0

FDD0D0

Achromatopsia

CACACA

CFCFCF

D4D4D4

D9D9D9

DEDEDE

Shades & Tints Shades & Tints

#BBD0D0

Dark

Light

#CCD0D0

Dark

Light

#DDD0D0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbd0d0;
  --color-2: #ccd0d0;
  --color-3: #ddd0d0;
  --color-4: #eed0d0;
  --color-5: #ffd0d0;
}

SCSS

$color-1: #bbd0d0;
$color-2: #ccd0d0;
$color-3: #ddd0d0;
$color-4: #eed0d0;
$color-5: #ffd0d0;

TAILWIND

colors: {
  'brand-1': '#bbd0d0',
  'brand-2': '#ccd0d0',
  'brand-3': '#ddd0d0',
  'brand-4': '#eed0d0',
  'brand-5': '#ffd0d0',
}

RGB Array

[187, 208, 208], [204, 208, 208], [221, 208, 208], [238, 208, 208], [255, 208, 208]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBD0D0, #CCD0D0, #DDD0D0, #EED0D0, #FFD0D0 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: #bbd0d0; --color-2: #ccd0d0; --color-3: #ddd0d0; --color-4: #eed0d0; --color-5: #ffd0d0. 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