← Back to Editor

#CDD6E5 · #D7CDCE · #B9C2C9 · #A5B6C6 · #9DABB6

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CDD6E5

Azure · LightGray · Sky Blue

HEX
#CDD6E5
RGB
rgb(205, 214, 229)
HSL
hsl(218, 32%, 85%)
HSB
hsb(218, 10%, 90%)
CMYK
cmyk(10%, 7%, 0%, 10%)
Oklch
oklch(87.4% 0.023 260.7)

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

#D7CDCE

Peach Pink · LightGray · Cherry Blossom

HEX
#D7CDCE
RGB
rgb(215, 205, 206)
HSL
hsl(354, 11%, 82%)
HSB
hsb(354, 5%, 84%)
CMYK
cmyk(0%, 5%, 4%, 16%)
Oklch
oklch(85.7% 0.011 10.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#B9C2C9

Sky Blue · Silver · Cobalt Blue

HEX
#B9C2C9
RGB
rgb(185, 194, 201)
HSL
hsl(206, 13%, 76%)
HSB
hsb(206, 8%, 79%)
CMYK
cmyk(8%, 3%, 0%, 21%)
Oklch
oklch(80.9% 0.014 241.0)

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

#A5B6C6

Sky Blue · Silver · Cobalt Blue

HEX
#A5B6C6
RGB
rgb(165, 182, 198)
HSL
hsl(209, 22%, 71%)
HSB
hsb(209, 17%, 78%)
CMYK
cmyk(17%, 8%, 0%, 22%)
Oklch
oklch(76.8% 0.030 246.6)

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

#9DABB6

Sky Blue · DarkGray · Cobalt Blue

HEX
#9DABB6
RGB
rgb(157, 171, 182)
HSL
hsl(206, 15%, 66%)
HSB
hsb(206, 14%, 71%)
CMYK
cmyk(14%, 6%, 0%, 29%)
Oklch
oklch(73.4% 0.022 241.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDD6E5
E5DCCD

Analogous

CDE2E5
CDD6E5
D0CDE5

Triadic

CDD6E5
E5CDD5
D5E5CD

Split-Comp.

CDD6E5
E5D0CD
E2E5CD

Tetradic

CDD6E5
E5CDE2
E5DCCD
CDE5D0

Contrast Matrix WCAG 2.1 Contrast

CDD6E5
D7CDCE
B9C2C9
A5B6C6
9DABB6
—
1.1
Fail
1.2
Fail
1.4
Fail
1.6
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.5
Fail
1.2
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.4
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
1.6
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
White BG
1.5Fail
1.6Fail
1.8Fail
2.1Fail
2.4Fail
Black BG
14.3AAA
13.5AAA
11.6AAA
10.1AAA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1E1
D3D3CE
BDBDC7
ACADC2
A3A3B3

Deuteranopia

D0D0E1
D3D4CE
BCBCC7
ABAAC1
A2A1B3

Tritanopia

CDDFDE
D7CECE
B9C6C6
A6BFBE
9EB1B1

Achromatopsia

D5D5D5
D0D0D0
C0C0C0
B3B3B3
A8A8A8

Shades & Tints Shades & Tints

#CDD6E5

Dark
Light

#D7CDCE

Dark
Light

#B9C2C9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdd6e5;
  --color-2: #d7cdce;
  --color-3: #b9c2c9;
  --color-4: #a5b6c6;
  --color-5: #9dabb6;
}

SCSS

$color-1: #cdd6e5;
$color-2: #d7cdce;
$color-3: #b9c2c9;
$color-4: #a5b6c6;
$color-5: #9dabb6;

TAILWIND

colors: {
  'brand-1': '#cdd6e5',
  'brand-2': '#d7cdce',
  'brand-3': '#b9c2c9',
  'brand-4': '#a5b6c6',
  'brand-5': '#9dabb6',
}

RGB Array

[205, 214, 229], [215, 205, 206], [185, 194, 201], [165, 182, 198], [157, 171, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDD6E5, #D7CDCE, #B9C2C9, #A5B6C6, #9DABB6 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cdd6e5; --color-2: #d7cdce; --color-3: #b9c2c9; --color-4: #a5b6c6; --color-5: #9dabb6. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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