#D9DEE3 + #D0DCE7 + #C2D6E8 + #B2CBE1 + #A5C3DD · luxury - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D9DEE3

Azure · LightGray · Sky Blue

HEX

#D9DEE3

RGB

rgb(217, 222, 227)

HSL

hsl(210, 15%, 87%)

HSB

hsb(210, 4%, 89%)

CMYK

cmyk(4%, 2%, 0%, 11%)

Oklch

oklch(89.8% 0.009 247.9)

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

#D0DCE7

Sky Blue · LightGray · Sky Blue

HEX

#D0DCE7

RGB

rgb(208, 220, 231)

HSL

hsl(209, 32%, 86%)

HSB

hsb(209, 10%, 91%)

CMYK

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

Oklch

oklch(88.9% 0.020 245.7)

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

#C2D6E8

Sky Blue · LightBlue · Sky Blue

HEX

#C2D6E8

RGB

rgb(194, 214, 232)

HSL

hsl(208, 45%, 84%)

HSB

hsb(208, 16%, 91%)

CMYK

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

Oklch

oklch(86.7% 0.033 245.3)

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

#B2CBE1

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#B2CBE1

RGB

rgb(178, 203, 225)

HSL

hsl(208, 44%, 79%)

HSB

hsb(208, 21%, 88%)

CMYK

cmyk(21%, 10%, 0%, 12%)

Oklch

oklch(83.1% 0.041 244.9)

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

#A5C3DD

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#A5C3DD

RGB

rgb(165, 195, 221)

HSL

hsl(208, 45%, 76%)

HSB

hsb(208, 25%, 87%)

CMYK

cmyk(25%, 12%, 0%, 13%)

Oklch

oklch(80.4% 0.049 244.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9DEE3

E3DED9

Analogous

D9E3E3

D9DEE3

D9D9E3

Triadic

D9DEE3

E3D9DE

DEE3D9

Split-Comp.

D9DEE3

E3D9D9

E3E3D9

Tetradic

D9DEE3

E3D9E3

E3DED9

D9E3D9

Contrast Matrix WCAG 2.1 Contrast

D9DEE3	D0DCE7	C2D6E8	B2CBE1	A5C3DD
—	1.0 Fail	1.1 Fail	1.2 Fail	1.4 Fail
1.0 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.2 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.4Fail

1.5Fail

1.7Fail

1.8Fail

Black BG

15.5AAA

15.1AAA

14.1AAA

12.5AAA

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBE2

D5D5E4

CBCBE4

BDBDDC

B2B2D7

Deuteranopia

DBDAE1

D5D4E4

CAC8E3

BBBADA

B0AED5

Tritanopia

D9E1E1

D1E2E2

C3E0DF

B3D7D7

A7D2D1

Achromatopsia

DDDDDD

DADADA

D2D2D2

C6C6C6

BDBDBD

Shades & Tints Shades & Tints

#D9DEE3

Dark

Light

#D0DCE7

Dark

Light

#C2D6E8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9dee3;
  --color-2: #d0dce7;
  --color-3: #c2d6e8;
  --color-4: #b2cbe1;
  --color-5: #a5c3dd;
}

SCSS

$color-1: #d9dee3;
$color-2: #d0dce7;
$color-3: #c2d6e8;
$color-4: #b2cbe1;
$color-5: #a5c3dd;

TAILWIND

colors: {
  'brand-1': '#d9dee3',
  'brand-2': '#d0dce7',
  'brand-3': '#c2d6e8',
  'brand-4': '#b2cbe1',
  'brand-5': '#a5c3dd',
}

RGB Array

[217, 222, 227], [208, 220, 231], [194, 214, 232], [178, 203, 225], [165, 195, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This luxury-style palette of #D9DEE3, #D0DCE7, #C2D6E8, #B2CBE1, #A5C3DD 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: #d9dee3; --color-2: #d0dce7; --color-3: #c2d6e8; --color-4: #b2cbe1; --color-5: #a5c3dd. 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 luxury-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