← Back to Editor

#D8D4D8 · #B9ABBA · #DFCDE0 · #8987B4 · #444449

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#D8D4D8

Silver Gray · LightGray · Pearl Gray

HEX
#D8D4D8
RGB
rgb(216, 212, 216)
HSL
hsl(300, 5%, 84%)
HSB
hsb(300, 2%, 85%)
CMYK
cmyk(0%, 2%, 0%, 15%)
Oklch
oklch(87.4% 0.007 325.6)

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

#B9ABBA

Lilac · Silver · Lilac Purple

HEX
#B9ABBA
RGB
rgb(185, 171, 186)
HSL
hsl(296, 10%, 70%)
HSB
hsb(296, 8%, 73%)
CMYK
cmyk(1%, 8%, 0%, 27%)
Oklch
oklch(75.8% 0.026 323.8)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#DFCDE0

Lilac · LightGray · Lavender

HEX
#DFCDE0
RGB
rgb(223, 205, 224)
HSL
hsl(297, 23%, 84%)
HSB
hsb(297, 8%, 88%)
CMYK
cmyk(0%, 8%, 0%, 12%)
Oklch
oklch(86.9% 0.032 324.3)

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

#8987B4

Wisteria · LightSlateGray · Cobalt Blue

HEX
#8987B4
RGB
rgb(137, 135, 180)
HSL
hsl(243, 23%, 62%)
HSB
hsb(243, 25%, 71%)
CMYK
cmyk(24%, 25%, 0%, 29%)
Oklch
oklch(64.2% 0.067 286.4)

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

#444449

Dark Cyan · DarkSlateGray · Charcoal

HEX
#444449
RGB
rgb(68, 68, 73)
HSL
hsl(240, 4%, 28%)
HSB
hsb(240, 7%, 29%)
CMYK
cmyk(7%, 7%, 0%, 71%)
Oklch
oklch(38.8% 0.008 286.0)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8D4D8
D4D8D4

Analogous

D6D4D8
D8D4D8
D8D4D6

Triadic

D8D4D8
D8D8D4
D4D8D8

Split-Comp.

D8D4D8
D6D8D4
D4D8D6

Tetradic

D8D4D8
D8D6D4
D4D8D4
D4D6D8

Contrast Matrix WCAG 2.1 Contrast

D8D4D8
B9ABBA
DFCDE0
8987B4
444449
—
1.5
Fail
1.0
Fail
2.3
Fail
6.6
AA
1.5
Fail
—
1.5
Fail
1.6
Fail
4.4
AA Large
1.0
Fail
1.5
Fail
—
2.3
Fail
6.4
AA
2.3
Fail
1.6
Fail
2.3
Fail
—
2.9
Fail
6.6
AA
4.4
AA Large
6.4
AA
2.9
Fail
—
White BG
1.5Fail
2.2Fail
1.5Fail
3.4AA Large
9.7AAA
Black BG
14.3AAA
9.6AAA
13.9AAA
6.2AA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6D7
B3B3B6
D7D7DB
8888A9
444448

Deuteranopia

D7D7D7
B4B5B6
D8DADA
8888A7
444448

Tritanopia

D8D6D6
B8B4B3
DED8D7
89A19F
444747

Achromatopsia

D6D6D6
B1B1B1
D5D5D5
8D8D8D
454545

Shades & Tints Shades & Tints

#D8D4D8

Dark
Light

#B9ABBA

Dark
Light

#DFCDE0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8d4d8;
  --color-2: #b9abba;
  --color-3: #dfcde0;
  --color-4: #8987b4;
  --color-5: #444449;
}

SCSS

$color-1: #d8d4d8;
$color-2: #b9abba;
$color-3: #dfcde0;
$color-4: #8987b4;
$color-5: #444449;

TAILWIND

colors: {
  'brand-1': '#d8d4d8',
  'brand-2': '#b9abba',
  'brand-3': '#dfcde0',
  'brand-4': '#8987b4',
  'brand-5': '#444449',
}

RGB Array

[216, 212, 216], [185, 171, 186], [223, 205, 224], [137, 135, 180], [68, 68, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8D4D8, #B9ABBA, #DFCDE0, #8987B4, #444449 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #d8d4d8; --color-2: #b9abba; --color-3: #dfcde0; --color-4: #8987b4; --color-5: #444449. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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