← Back to Editor

#8D0B2C · #B20B36 · #3D3933 · #2A2020 · #0B0B0B

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8D0B2C

Vermilion · Brown · Wine Red

HEX
#8D0B2C
RGB
rgb(141, 11, 44)
HSL
hsl(345, 86%, 30%)
HSB
hsb(345, 92%, 55%)
CMYK
cmyk(0%, 92%, 69%, 45%)
Oklch
oklch(41.3% 0.159 16.1)

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

#B20B36

Vermilion · FireBrick · Wine Red

HEX
#B20B36
RGB
rgb(178, 11, 54)
HSL
hsl(345, 88%, 37%)
HSB
hsb(345, 94%, 70%)
CMYK
cmyk(0%, 94%, 70%, 30%)
Oklch
oklch(48.8% 0.190 17.2)

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

#3D3933

Ochre · DarkSlateGray · Dark Stone

HEX
#3D3933
RGB
rgb(61, 57, 51)
HSL
hsl(36, 9%, 22%)
HSB
hsb(36, 16%, 24%)
CMYK
cmyk(0%, 7%, 16%, 76%)
Oklch
oklch(34.7% 0.012 78.2)

Traditional「Ochre」· Paint「Dark Stone」· Creative Midnight Shadow

#2A2020

Crimson · Black · Deep Berry

HEX
#2A2020
RGB
rgb(42, 32, 32)
HSL
hsl(0, 14%, 15%)
HSB
hsb(0, 24%, 16%)
CMYK
cmyk(0%, 24%, 24%, 84%)
Oklch
oklch(25.5% 0.016 18.2)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#0B0B0B

Ink Black · Black · Jet Black

HEX
#0B0B0B
RGB
rgb(11, 11, 11)
HSL
hsl(0, 0%, 4%)
HSB
hsb(0, 0%, 4%)
CMYK
cmyk(0%, 0%, 0%, 96%)
Oklch
oklch(15.0% 0.000 89.9)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8D0B2C
0B8E6D

Analogous

8E0B6D
8D0B2C
8E2C0B

Triadic

8D0B2C
2C8E0B
0B2C8E

Split-Comp.

8D0B2C
0B8E2C
0B6D8E

Tetradic

8D0B2C
6D8E0B
0B8E6D
2C0B8E

Contrast Matrix WCAG 2.1 Contrast

8D0B2C
B20B36
3D3933
2A2020
0B0B0B
—
1.4
Fail
1.2
Fail
1.7
Fail
2.1
Fail
1.4
Fail
—
1.6
Fail
2.3
Fail
2.8
Fail
1.2
Fail
1.6
Fail
—
1.4
Fail
1.7
Fail
1.7
Fail
2.3
Fail
1.4
Fail
—
1.2
Fail
2.1
Fail
2.8
Fail
1.7
Fail
1.2
Fail
—
White BG
9.5AAA
7.0AAA
11.5AAA
15.8AAA
19.7AAA
Black BG
2.2Fail
3.0Fail
1.8Fail
1.3Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

555424
6A682C
3B3B34
262620
0B0B0B

Deuteranopia

5C6622
738029
3C3C35
262720
0B0B0B

Tritanopia

871E1C
AA2322
3D3636
2A2020
0B0B0B

Achromatopsia

363636
424242
3A3A3A
232323
0B0B0B

Shades & Tints Shades & Tints

#8D0B2C

Dark
Light

#B20B36

Dark
Light

#3D3933

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8d0b2c;
  --color-2: #b20b36;
  --color-3: #3d3933;
  --color-4: #2a2020;
  --color-5: #0b0b0b;
}

SCSS

$color-1: #8d0b2c;
$color-2: #b20b36;
$color-3: #3d3933;
$color-4: #2a2020;
$color-5: #0b0b0b;

TAILWIND

colors: {
  'brand-1': '#8d0b2c',
  'brand-2': '#b20b36',
  'brand-3': '#3d3933',
  'brand-4': '#2a2020',
  'brand-5': '#0b0b0b',
}

RGB Array

[141, 11, 44], [178, 11, 54], [61, 57, 51], [42, 32, 32], [11, 11, 11]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #8D0B2C, #B20B36, #3D3933, #2A2020, #0B0B0B is ideal for: tech websites, dark mode UIs, game UIs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #8d0b2c; --color-2: #b20b36; --color-3: #3d3933; --color-4: #2a2020; --color-5: #0b0b0b. 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. 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. 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