← Back to Editor

#B5B8C1 · #7D818C · #4D535F · #2B323C · #040811

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#B5B8C1

Azure · Silver · Pearl Gray

HEX
#B5B8C1
RGB
rgb(181, 184, 193)
HSL
hsl(225, 9%, 73%)
HSB
hsb(225, 6%, 76%)
CMYK
cmyk(6%, 5%, 0%, 24%)
Oklch
oklch(78.3% 0.013 271.2)

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

#7D818C

Ash · Gray · Warm Gray

HEX
#7D818C
RGB
rgb(125, 129, 140)
HSL
hsl(224, 6%, 52%)
HSB
hsb(224, 11%, 55%)
CMYK
cmyk(11%, 8%, 0%, 45%)
Oklch
oklch(60.4% 0.017 269.9)

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

#4D535F

Indigo · DarkSlateGray · Prussian Blue

HEX
#4D535F
RGB
rgb(77, 83, 95)
HSL
hsl(220, 10%, 34%)
HSB
hsb(220, 19%, 37%)
CMYK
cmyk(19%, 13%, 0%, 63%)
Oklch
oklch(44.1% 0.021 264.3)

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

#2B323C

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#2B323C
RGB
rgb(43, 50, 60)
HSL
hsl(215, 17%, 20%)
HSB
hsb(215, 28%, 24%)
CMYK
cmyk(28%, 17%, 0%, 76%)
Oklch
oklch(31.5% 0.020 257.3)

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

#040811

Indigo · Black · Deep Sea Blue

HEX
#040811
RGB
rgb(4, 8, 17)
HSL
hsl(222, 62%, 4%)
HSB
hsb(222, 76%, 7%)
CMYK
cmyk(76%, 53%, 0%, 93%)
Oklch
oklch(13.4% 0.022 260.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B5B8C1
C0BDB4

Analogous

B4BDC0
B5B8C1
B7B4C0

Triadic

B5B8C1
C0B4B7
B7C0B4

Split-Comp.

B5B8C1
C0B7B4
BDC0B4

Tetradic

B5B8C1
C0B4BD
C0BDB4
B4C0B7

Contrast Matrix WCAG 2.1 Contrast

B5B8C1
7D818C
4D535F
2B323C
040811
—
2.0
Fail
3.9
AA Large
6.5
AA
10.1
AAA
2.0
Fail
—
2.0
Fail
3.3
AA Large
5.1
AA
3.9
AA Large
2.0
Fail
—
1.7
Fail
2.6
Fail
6.5
AA
3.3
AA Large
1.7
Fail
—
1.5
Fail
10.1
AAA
5.1
AA
2.6
Fail
1.5
Fail
—
White BG
2.0Fail
3.9AA Large
7.7AAA
12.9AAA
20.0AAA
Black BG
10.6AAA
5.4AA
2.7Fail
1.6Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B6BF
7F7F89
50505C
2E2E3A
06060F

Deuteranopia

B6B6BE
7F7E89
4F4F5B
2E2D39
06050E

Tritanopia

B5BDBD
7D8787
4D5A59
2B3837
040D0D

Achromatopsia

B8B8B8
818181
535353
313131
080808

Shades & Tints Shades & Tints

#B5B8C1

Dark
Light

#7D818C

Dark
Light

#4D535F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b5b8c1;
  --color-2: #7d818c;
  --color-3: #4d535f;
  --color-4: #2b323c;
  --color-5: #040811;
}

SCSS

$color-1: #b5b8c1;
$color-2: #7d818c;
$color-3: #4d535f;
$color-4: #2b323c;
$color-5: #040811;

TAILWIND

colors: {
  'brand-1': '#b5b8c1',
  'brand-2': '#7d818c',
  'brand-3': '#4d535f',
  'brand-4': '#2b323c',
  'brand-5': '#040811',
}

RGB Array

[181, 184, 193], [125, 129, 140], [77, 83, 95], [43, 50, 60], [4, 8, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B5B8C1, #7D818C, #4D535F, #2B323C, #040811 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: #b5b8c1; --color-2: #7d818c; --color-3: #4d535f; --color-4: #2b323c; --color-5: #040811. 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 general-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