#D0DDE6 + #C5EBE1 + #D2DCE7 + #CCC6C2 + #D7C9F3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D0DDE6

Sky Blue · LightGray · Sky Blue

HEX

#D0DDE6

RGB

rgb(208, 221, 230)

HSL

hsl(205, 31%, 86%)

HSB

hsb(205, 10%, 90%)

CMYK

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

Oklch

oklch(89.0% 0.019 237.8)

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

#C5EBE1

Jade · LightBlue · Glacier Blue

HEX

#C5EBE1

RGB

rgb(197, 235, 225)

HSL

hsl(164, 49%, 85%)

HSB

hsb(164, 16%, 92%)

CMYK

cmyk(16%, 0%, 4%, 8%)

Oklch

oklch(91.0% 0.042 177.6)

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

#D2DCE7

Azure · LightGray · Sky Blue

HEX

#D2DCE7

RGB

rgb(210, 220, 231)

HSL

hsl(211, 30%, 86%)

HSB

hsb(211, 9%, 91%)

CMYK

cmyk(9%, 5%, 0%, 9%)

Oklch

oklch(89.0% 0.019 250.6)

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

#CCC6C2

Apricot · Silver · Pearl Gray

HEX

#CCC6C2

RGB

rgb(204, 198, 194)

HSL

hsl(24, 9%, 78%)

HSB

hsb(24, 5%, 80%)

CMYK

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

Oklch

oklch(83.0% 0.009 56.3)

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

#D7C9F3

Wisteria · Lavender · Lavender

HEX

#D7C9F3

RGB

rgb(215, 201, 243)

HSL

hsl(260, 64%, 87%)

HSB

hsb(260, 17%, 95%)

CMYK

cmyk(12%, 17%, 0%, 5%)

Oklch

oklch(86.1% 0.059 300.4)

Traditional「Wisteria」· Paint「Lavender」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D0DDE6

E6D9D0

Analogous

D0E6E5

D0DDE6

D0D2E6

Triadic

D0DDE6

E6D0DD

DDE6D0

Split-Comp.

D0DDE6

E6D0D2

E6E5D0

Tetradic

D0DDE6

E5D0E6

E6D9D0

D2E6D0

Contrast Matrix WCAG 2.1 Contrast

D0DDE6	C5EBE1	D2DCE7	CCC6C2	D7C9F3
—	1.1 Fail	1.0 Fail	1.2 Fail	1.1 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.2 Fail
1.0 Fail	1.1 Fail	—	1.2 Fail	1.1 Fail
1.2 Fail	1.3 Fail	1.2 Fail	—	1.1 Fail
1.1 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.4Fail

1.3Fail

1.4Fail

1.7Fail

1.6Fail

Black BG

15.2AAA

16.3AAA

15.1AAA

12.4AAA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6E4

D5D6E3

D6D6E4

C9C9C3

D1D1E9

Deuteranopia

D5D4E3

D3D0E4

D6D5E4

CACAC3

D2D3E6

Tritanopia

D1E2E2

C7E5E6

D3E2E2

CCC4C4

D6E1DF

Achromatopsia

DADADA

DEDEDE

DADADA

C7C7C7

D2D2D2

Shades & Tints Shades & Tints

#D0DDE6

Dark

Light

#C5EBE1

Dark

Light

#D2DCE7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d0dde6;
  --color-2: #c5ebe1;
  --color-3: #d2dce7;
  --color-4: #ccc6c2;
  --color-5: #d7c9f3;
}

SCSS

$color-1: #d0dde6;
$color-2: #c5ebe1;
$color-3: #d2dce7;
$color-4: #ccc6c2;
$color-5: #d7c9f3;

TAILWIND

colors: {
  'brand-1': '#d0dde6',
  'brand-2': '#c5ebe1',
  'brand-3': '#d2dce7',
  'brand-4': '#ccc6c2',
  'brand-5': '#d7c9f3',
}

RGB Array

[208, 221, 230], [197, 235, 225], [210, 220, 231], [204, 198, 194], [215, 201, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D0DDE6, #C5EBE1, #D2DCE7, #CCC6C2, #D7C9F3 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: #d0dde6; --color-2: #c5ebe1; --color-3: #d2dce7; --color-4: #ccc6c2; --color-5: #d7c9f3. 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