← Back to Editor

#B7696B · #877373 · #95999E · #9EA2BA · #B8A6BD

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

#B7696B

Crimson · Gray · Passion Red

HEX
#B7696B
RGB
rgb(183, 105, 107)
HSL
hsl(358, 35%, 56%)
HSB
hsb(358, 43%, 72%)
CMYK
cmyk(0%, 43%, 42%, 28%)
Oklch
oklch(60.9% 0.100 18.8)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#877373

Crimson · Gray · Warm Gray

HEX
#877373
RGB
rgb(135, 115, 115)
HSL
hsl(0, 8%, 49%)
HSB
hsb(0, 15%, 53%)
CMYK
cmyk(0%, 15%, 15%, 47%)
Oklch
oklch(57.4% 0.025 17.9)

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

#95999E

Ash · DarkGray · Silver Sand

HEX
#95999E
RGB
rgb(149, 153, 158)
HSL
hsl(213, 4%, 60%)
HSB
hsb(213, 6%, 62%)
CMYK
cmyk(6%, 3%, 0%, 38%)
Oklch
oklch(68.1% 0.009 253.9)

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

#9EA2BA

Azure · DarkGray · Cobalt Blue

HEX
#9EA2BA
RGB
rgb(158, 162, 186)
HSL
hsl(231, 17%, 67%)
HSB
hsb(231, 15%, 73%)
CMYK
cmyk(15%, 13%, 0%, 27%)
Oklch
oklch(71.7% 0.035 278.0)

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

#B8A6BD

Lilac · DarkGray · Lilac Purple

HEX
#B8A6BD
RGB
rgb(184, 166, 189)
HSL
hsl(287, 15%, 70%)
HSB
hsb(287, 12%, 74%)
CMYK
cmyk(3%, 12%, 0%, 26%)
Oklch
oklch(74.8% 0.038 318.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7696B
68B6B3

Analogous

B66891
B7696B
B68C68

Triadic

B7696B
6AB668
686AB6

Split-Comp.

B7696B
68B68C
6891B6

Tetradic

B7696B
91B668
68B6B3
8C68B6

Contrast Matrix WCAG 2.1 Contrast

B7696B
877373
95999E
9EA2BA
B8A6BD
—
1.1
Fail
1.4
Fail
1.6
Fail
1.8
Fail
1.1
Fail
—
1.5
Fail
1.8
Fail
2.0
Fail
1.4
Fail
1.5
Fail
—
1.1
Fail
1.3
Fail
1.6
Fail
1.8
Fail
1.1
Fail
—
1.1
Fail
1.8
Fail
2.0
Fail
1.3
Fail
1.1
Fail
—
White BG
4.0AA Large
4.4AA Large
2.9Fail
2.5Fail
2.3Fail
Black BG
5.2AA
4.7AA
7.3AAA
8.3AAA
9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

95956B
7E7E73
97979D
A0A0B4
B0B0B7

Deuteranopia

9AA06A
808173
97969D
A09FB3
B1B3B6

Tritanopia

B36A6A
867373
959C9C
9EB0AF
B7B3B2

Achromatopsia

818181
797979
989898
A4A4A4
AEAEAE

Shades & Tints Shades & Tints

#B7696B

Dark
Light

#877373

Dark
Light

#95999E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7696b;
  --color-2: #877373;
  --color-3: #95999e;
  --color-4: #9ea2ba;
  --color-5: #b8a6bd;
}

SCSS

$color-1: #b7696b;
$color-2: #877373;
$color-3: #95999e;
$color-4: #9ea2ba;
$color-5: #b8a6bd;

TAILWIND

colors: {
  'brand-1': '#b7696b',
  'brand-2': '#877373',
  'brand-3': '#95999e',
  'brand-4': '#9ea2ba',
  'brand-5': '#b8a6bd',
}

RGB Array

[183, 105, 107], [135, 115, 115], [149, 153, 158], [158, 162, 186], [184, 166, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #B7696B, #877373, #95999E, #9EA2BA, #B8A6BD 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: #b7696b; --color-2: #877373; --color-3: #95999e; --color-4: #9ea2ba; --color-5: #b8a6bd. 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