← Back to Editor

#8699A7 · #6F7571 · #DCDFD6 · #9EB1AD · #B0B8BA

dark

A 5-color dark 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

#8699A7

Slate Blue · LightSlateGray · Navy Blue

HEX
#8699A7
RGB
rgb(134, 153, 167)
HSL
hsl(205, 16%, 59%)
HSB
hsb(205, 20%, 65%)
CMYK
cmyk(20%, 8%, 0%, 35%)
Oklch
oklch(67.3% 0.030 239.9)

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

#6F7571

Ink Gray · DimGray · Warm Gray

HEX
#6F7571
RGB
rgb(111, 117, 113)
HSL
hsl(140, 3%, 45%)
HSB
hsb(140, 5%, 46%)
CMYK
cmyk(5%, 0%, 3%, 54%)
Oklch
oklch(55.6% 0.009 156.9)

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

#DCDFD6

Willow Green · LightGray · Mint Green

HEX
#DCDFD6
RGB
rgb(220, 223, 214)
HSL
hsl(80, 12%, 86%)
HSB
hsb(80, 4%, 87%)
CMYK
cmyk(1%, 0%, 4%, 13%)
Oklch
oklch(89.9% 0.013 121.7)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#9EB1AD

Jade · DarkGray · Lake Green

HEX
#9EB1AD
RGB
rgb(158, 177, 173)
HSL
hsl(167, 11%, 66%)
HSB
hsb(167, 11%, 69%)
CMYK
cmyk(11%, 0%, 2%, 31%)
Oklch
oklch(74.5% 0.022 181.6)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#B0B8BA

Silver Gray · Silver · Pearl Gray

HEX
#B0B8BA
RGB
rgb(176, 184, 186)
HSL
hsl(192, 7%, 71%)
HSB
hsb(192, 5%, 73%)
CMYK
cmyk(5%, 1%, 0%, 27%)
Oklch
oklch(77.7% 0.009 214.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8699A7
A79486

Analogous

86A7A4
8699A7
8689A7

Triadic

8699A7
A78699
99A786

Split-Comp.

8699A7
A78689
A7A486

Tetradic

8699A7
A486A7
A79486
89A786

Contrast Matrix WCAG 2.1 Contrast

8699A7
6F7571
DCDFD6
9EB1AD
B0B8BA
—
1.6
Fail
2.2
Fail
1.3
Fail
1.5
Fail
1.6
Fail
—
3.5
AA Large
2.1
Fail
2.3
Fail
2.2
Fail
3.5
AA Large
—
1.7
Fail
1.5
Fail
1.3
Fail
2.1
Fail
1.7
Fail
—
1.1
Fail
1.5
Fail
2.3
Fail
1.5
Fail
1.1
Fail
—
White BG
2.9Fail
4.7AA
1.3Fail
2.2Fail
2.0Fail
Black BG
7.1AAA
4.5AA Large
15.6AAA
9.3AAA
10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8EA4
727272
DDDDD8
A6A6AE
B3B4BA

Deuteranopia

8D8CA3
717172
DDDDD9
A5A4AE
B3B2B9

Tritanopia

87A1A0
6F7373
DCDADA
9FAFAF
B0B9B9

Achromatopsia

959595
737373
DDDDDD
ABABAB
B6B6B6

Shades & Tints Shades & Tints

#8699A7

Dark
Light

#6F7571

Dark
Light

#DCDFD6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8699a7;
  --color-2: #6f7571;
  --color-3: #dcdfd6;
  --color-4: #9eb1ad;
  --color-5: #b0b8ba;
}

SCSS

$color-1: #8699a7;
$color-2: #6f7571;
$color-3: #dcdfd6;
$color-4: #9eb1ad;
$color-5: #b0b8ba;

TAILWIND

colors: {
  'brand-1': '#8699a7',
  'brand-2': '#6f7571',
  'brand-3': '#dcdfd6',
  'brand-4': '#9eb1ad',
  'brand-5': '#b0b8ba',
}

RGB Array

[134, 153, 167], [111, 117, 113], [220, 223, 214], [158, 177, 173], [176, 184, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #8699A7, #6F7571, #DCDFD6, #9EB1AD, #B0B8BA 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: #8699a7; --color-2: #6f7571; --color-3: #dcdfd6; --color-4: #9eb1ad; --color-5: #b0b8ba. 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 dark-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