← Back to Editor

#D9DDE7 · #ABB0B2 · #9BA2A8 · #918A84 · #8390A3

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

#D9DDE7

Azure · LightGray · Sky Blue

HEX
#D9DDE7
RGB
rgb(217, 221, 231)
HSL
hsl(223, 23%, 88%)
HSB
hsb(223, 6%, 91%)
CMYK
cmyk(6%, 4%, 0%, 9%)
Oklch
oklch(89.7% 0.014 268.5)

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

#ABB0B2

Ash · DarkGray · Silver Sand

HEX
#ABB0B2
RGB
rgb(171, 176, 178)
HSL
hsl(197, 4%, 68%)
HSB
hsb(197, 4%, 70%)
CMYK
cmyk(4%, 1%, 0%, 30%)
Oklch
oklch(75.4% 0.006 223.5)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#9BA2A8

Ash · DarkGray · Silver Sand

HEX
#9BA2A8
RGB
rgb(155, 162, 168)
HSL
hsl(208, 7%, 63%)
HSB
hsb(208, 8%, 66%)
CMYK
cmyk(8%, 4%, 0%, 34%)
Oklch
oklch(70.8% 0.012 243.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#918A84

Ash · Gray · Warm Gray

HEX
#918A84
RGB
rgb(145, 138, 132)
HSL
hsl(28, 6%, 54%)
HSB
hsb(28, 9%, 57%)
CMYK
cmyk(0%, 5%, 9%, 43%)
Oklch
oklch(63.8% 0.012 63.3)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#8390A3

Azure · LightSlateGray · Navy Blue

HEX
#8390A3
RGB
rgb(131, 144, 163)
HSL
hsl(216, 15%, 58%)
HSB
hsb(216, 20%, 64%)
CMYK
cmyk(20%, 12%, 0%, 36%)
Oklch
oklch(64.9% 0.032 257.8)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9DDE7
E7E3D9

Analogous

D9E4E7
D9DDE7
DCD9E7

Triadic

D9DDE7
E7D9DD
DDE7D9

Split-Comp.

D9DDE7
E7DCD9
E4E7D9

Tetradic

D9DDE7
E7D9E4
E7E3D9
D9E7DC

Contrast Matrix WCAG 2.1 Contrast

D9DDE7
ABB0B2
9BA2A8
918A84
8390A3
—
1.6
Fail
1.9
Fail
2.5
Fail
2.4
Fail
1.6
Fail
—
1.2
Fail
1.6
Fail
1.5
Fail
1.9
Fail
1.2
Fail
—
1.3
Fail
1.3
Fail
2.5
Fail
1.6
Fail
1.3
Fail
—
1.1
Fail
2.4
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
White BG
1.4Fail
2.2Fail
2.6Fail
3.4AA Large
3.2AA Large
Black BG
15.4AAA
9.6AAA
8.1AAA
6.2AA
6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBE5
ADADB2
9E9EA7
8E8E85
89899E

Deuteranopia

DBDAE4
ADADB1
9E9DA6
8E8F86
88879D

Tritanopia

D9E3E2
ABB1B1
9BA5A5
918787
849B9A

Achromatopsia

DDDDDD
AFAFAF
A1A1A1
8B8B8B
8E8E8E

Shades & Tints Shades & Tints

#D9DDE7

Dark
Light

#ABB0B2

Dark
Light

#9BA2A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9dde7;
  --color-2: #abb0b2;
  --color-3: #9ba2a8;
  --color-4: #918a84;
  --color-5: #8390a3;
}

SCSS

$color-1: #d9dde7;
$color-2: #abb0b2;
$color-3: #9ba2a8;
$color-4: #918a84;
$color-5: #8390a3;

TAILWIND

colors: {
  'brand-1': '#d9dde7',
  'brand-2': '#abb0b2',
  'brand-3': '#9ba2a8',
  'brand-4': '#918a84',
  'brand-5': '#8390a3',
}

RGB Array

[217, 221, 231], [171, 176, 178], [155, 162, 168], [145, 138, 132], [131, 144, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9DDE7, #ABB0B2, #9BA2A8, #918A84, #8390A3 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: #d9dde7; --color-2: #abb0b2; --color-3: #9ba2a8; --color-4: #918a84; --color-5: #8390a3. 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