← Back to Editor

#B7BCC2 · #828085 · #323949 · #191D25 · #750F0F

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#B7BCC2

Azure · Silver · Pearl Gray

HEX
#B7BCC2
RGB
rgb(183, 188, 194)
HSL
hsl(213, 8%, 74%)
HSB
hsb(213, 6%, 76%)
CMYK
cmyk(6%, 3%, 0%, 24%)
Oklch
oklch(79.3% 0.010 252.8)

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

#828085

Ash · Gray · Warm Gray

HEX
#828085
RGB
rgb(130, 128, 133)
HSL
hsl(264, 2%, 51%)
HSB
hsb(264, 4%, 52%)
CMYK
cmyk(2%, 4%, 0%, 48%)
Oklch
oklch(60.3% 0.008 304.2)

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

#323949

Indigo · DarkSlateGray · Prussian Blue

HEX
#323949
RGB
rgb(50, 57, 73)
HSL
hsl(222, 19%, 24%)
HSB
hsb(222, 32%, 29%)
CMYK
cmyk(32%, 22%, 0%, 71%)
Oklch
oklch(34.5% 0.030 266.4)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#191D25

Indigo · Black · Deep Sea Blue

HEX
#191D25
RGB
rgb(25, 29, 37)
HSL
hsl(220, 19%, 12%)
HSB
hsb(220, 32%, 15%)
CMYK
cmyk(32%, 22%, 0%, 85%)
Oklch
oklch(23.0% 0.017 264.2)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#750F0F

Vermilion · Maroon · Wine Red

HEX
#750F0F
RGB
rgb(117, 15, 15)
HSL
hsl(0, 77%, 26%)
HSB
hsb(0, 87%, 46%)
CMYK
cmyk(0%, 87%, 87%, 54%)
Oklch
oklch(36.3% 0.135 27.3)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7BCC2
C2BDB7

Analogous

B7C1C2
B7BCC2
B8B7C2

Triadic

B7BCC2
C2B7BC
BCC2B7

Split-Comp.

B7BCC2
C2B8B7
C1C2B7

Tetradic

B7BCC2
C2B7C1
C2BDB7
B7C2B8

Contrast Matrix WCAG 2.1 Contrast

B7BCC2
828085
323949
191D25
750F0F
—
2.0
Fail
6.0
AA
8.8
AAA
6.0
AA
2.0
Fail
—
3.0
Fail
4.3
AA Large
2.9
Fail
6.0
AA
3.0
Fail
—
1.5
Fail
1.0
Fail
8.8
AAA
4.3
AA Large
1.5
Fail
—
1.5
Fail
6.0
AA
2.9
Fail
1.0
Fail
1.5
Fail
—
White BG
1.9Fail
3.9AA Large
11.6AAA
16.9AAA
11.5AAA
Black BG
11.0AAA
5.4AA
1.8Fail
1.2Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B9C1
818184
353545
1B1B23
49480F

Deuteranopia

B9B9C0
818184
353444
1B1A23
4F560F

Tritanopia

B7BFBF
828383
324241
192221
700F0F

Achromatopsia

BBBBBB
818181
393939
1D1D1D
2D2D2D

Shades & Tints Shades & Tints

#B7BCC2

Dark
Light

#828085

Dark
Light

#323949

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7bcc2;
  --color-2: #828085;
  --color-3: #323949;
  --color-4: #191d25;
  --color-5: #750f0f;
}

SCSS

$color-1: #b7bcc2;
$color-2: #828085;
$color-3: #323949;
$color-4: #191d25;
$color-5: #750f0f;

TAILWIND

colors: {
  'brand-1': '#b7bcc2',
  'brand-2': '#828085',
  'brand-3': '#323949',
  'brand-4': '#191d25',
  'brand-5': '#750f0f',
}

RGB Array

[183, 188, 194], [130, 128, 133], [50, 57, 73], [25, 29, 37], [117, 15, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #B7BCC2, #828085, #323949, #191D25, #750F0F is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #b7bcc2; --color-2: #828085; --color-3: #323949; --color-4: #191d25; --color-5: #750f0f. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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