← Back to Editor

#D9BBB1 · #B4ABAE · #949AA6 · #778C9D · #5F7A8B

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D9BBB1

Apricot · Silver · Peach Orange

HEX
#D9BBB1
RGB
rgb(217, 187, 177)
HSL
hsl(15, 34%, 77%)
HSB
hsb(15, 18%, 85%)
CMYK
cmyk(0%, 14%, 18%, 15%)
Oklch
oklch(81.5% 0.037 39.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#B4ABAE

Ash · DarkGray · Silver Sand

HEX
#B4ABAE
RGB
rgb(180, 171, 174)
HSL
hsl(340, 6%, 69%)
HSB
hsb(340, 5%, 71%)
CMYK
cmyk(0%, 5%, 3%, 29%)
Oklch
oklch(75.0% 0.011 355.0)

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

#949AA6

Azure · DarkGray · Silver Sand

HEX
#949AA6
RGB
rgb(148, 154, 166)
HSL
hsl(220, 9%, 62%)
HSB
hsb(220, 11%, 65%)
CMYK
cmyk(11%, 7%, 0%, 35%)
Oklch
oklch(68.5% 0.019 264.4)

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

#778C9D

Slate Blue · LightSlateGray · Navy Blue

HEX
#778C9D
RGB
rgb(119, 140, 157)
HSL
hsl(207, 16%, 54%)
HSB
hsb(207, 24%, 62%)
CMYK
cmyk(24%, 11%, 0%, 38%)
Oklch
oklch(62.9% 0.035 242.7)

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

#5F7A8B

Slate Blue · SlateGray · Navy Blue

HEX
#5F7A8B
RGB
rgb(95, 122, 139)
HSL
hsl(203, 19%, 46%)
HSB
hsb(203, 32%, 55%)
CMYK
cmyk(32%, 12%, 0%, 45%)
Oklch
oklch(56.5% 0.041 236.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9BBB1
B0CED8

Analogous

D8B0BA
D9BBB1
D8CEB0

Triadic

D9BBB1
B0D8BA
BAB0D8

Split-Comp.

D9BBB1
B0D8CE
B0BAD8

Tetradic

D9BBB1
BAD8B0
B0CED8
CEB0D8

Contrast Matrix WCAG 2.1 Contrast

D9BBB1
B4ABAE
949AA6
778C9D
5F7A8B
—
1.2
Fail
1.6
Fail
1.9
Fail
2.5
Fail
1.2
Fail
—
1.3
Fail
1.6
Fail
2.0
Fail
1.6
Fail
1.3
Fail
—
1.2
Fail
1.6
Fail
1.9
Fail
1.6
Fail
1.2
Fail
—
1.3
Fail
2.5
Fail
2.0
Fail
1.6
Fail
1.3
Fail
—
White BG
1.8Fail
2.2Fail
2.8Fail
3.5AA Large
4.5AA
Black BG
11.7AAA
9.4AAA
7.4AAA
6.0AA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCCB3
B0B0AD
9797A3
808099
6B6B87

Deuteranopia

CED0B4
B1B1AD
9696A2
7F7D98
696786

Tritanopia

D7B5B6
B4ADAD
94A1A0
789695
608483

Achromatopsia

C3C3C3
AEAEAE
9A9A9A
888888
747474

Shades & Tints Shades & Tints

#D9BBB1

Dark
Light

#B4ABAE

Dark
Light

#949AA6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9bbb1;
  --color-2: #b4abae;
  --color-3: #949aa6;
  --color-4: #778c9d;
  --color-5: #5f7a8b;
}

SCSS

$color-1: #d9bbb1;
$color-2: #b4abae;
$color-3: #949aa6;
$color-4: #778c9d;
$color-5: #5f7a8b;

TAILWIND

colors: {
  'brand-1': '#d9bbb1',
  'brand-2': '#b4abae',
  'brand-3': '#949aa6',
  'brand-4': '#778c9d',
  'brand-5': '#5f7a8b',
}

RGB Array

[217, 187, 177], [180, 171, 174], [148, 154, 166], [119, 140, 157], [95, 122, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #D9BBB1, #B4ABAE, #949AA6, #778C9D, #5F7A8B is ideal for: brand design, premium product pages, magazine layouts. 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: #d9bbb1; --color-2: #b4abae; --color-3: #949aa6; --color-4: #778c9d; --color-5: #5f7a8b. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 dark-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco 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