← Back to Editor

#B41E43 · #8B1022 · #560104 · #56584D · #3F4541

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

#B41E43

Vermilion · Brown · Passion Red

HEX
#B41E43
RGB
rgb(180, 30, 67)
HSL
hsl(345, 71%, 41%)
HSB
hsb(345, 83%, 71%)
CMYK
cmyk(0%, 83%, 63%, 29%)
Oklch
oklch(50.3% 0.183 14.1)

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

#8B1022

Vermilion · DarkRed · Wine Red

HEX
#8B1022
RGB
rgb(139, 16, 34)
HSL
hsl(351, 79%, 30%)
HSB
hsb(351, 88%, 55%)
CMYK
cmyk(0%, 88%, 76%, 45%)
Oklch
oklch(41.0% 0.154 21.3)

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

#560104

Vermilion · Maroon · Deep Berry

HEX
#560104
RGB
rgb(86, 1, 4)
HSL
hsl(358, 98%, 17%)
HSB
hsb(358, 99%, 34%)
CMYK
cmyk(0%, 99%, 95%, 66%)
Oklch
oklch(28.6% 0.115 27.2)

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

#56584D

Ink Gray · DarkOliveGreen · Charcoal

HEX
#56584D
RGB
rgb(86, 88, 77)
HSL
hsl(71, 7%, 32%)
HSB
hsb(71, 13%, 35%)
CMYK
cmyk(2%, 0%, 12%, 65%)
Oklch
oklch(45.5% 0.018 115.5)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#3F4541

Dark Cyan · DarkSlateGray · Charcoal

HEX
#3F4541
RGB
rgb(63, 69, 65)
HSL
hsl(140, 5%, 26%)
HSB
hsb(140, 9%, 27%)
CMYK
cmyk(9%, 0%, 6%, 73%)
Oklch
oklch(38.3% 0.010 156.7)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B41E43
1EB38E

Analogous

B31E8E
B41E43
B3431E

Triadic

B41E43
43B31E
1E43B3

Split-Comp.

B41E43
1EB343
1E8EB3

Tetradic

B41E43
8EB31E
1EB38E
431EB3

Contrast Matrix WCAG 2.1 Contrast

B41E43
8B1022
560104
56584D
3F4541
—
1.5
Fail
2.3
Fail
1.1
Fail
1.5
Fail
1.5
Fail
—
1.6
Fail
1.3
Fail
1.0
Fail
2.3
Fail
1.6
Fail
—
2.1
Fail
1.5
Fail
1.1
Fail
1.3
Fail
2.1
Fail
—
1.4
Fail
1.5
Fail
1.0
Fail
1.5
Fail
1.4
Fail
—
White BG
6.5AA
9.6AAA
15.0AAA
7.2AAA
9.8AAA
Black BG
3.2AA Large
2.2Fail
1.4Fail
2.9Fail
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

73723A
56551E
313003
575750
424242

Deuteranopia

7C8738
5D661D
363C03
575750
414142

Tritanopia

AD3331
851A19
520303
565252
3F4343

Achromatopsia

4F4F4F
373737
1B1B1B
565656
434343

Shades & Tints Shades & Tints

#B41E43

Dark
Light

#8B1022

Dark
Light

#560104

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b41e43;
  --color-2: #8b1022;
  --color-3: #560104;
  --color-4: #56584d;
  --color-5: #3f4541;
}

SCSS

$color-1: #b41e43;
$color-2: #8b1022;
$color-3: #560104;
$color-4: #56584d;
$color-5: #3f4541;

TAILWIND

colors: {
  'brand-1': '#b41e43',
  'brand-2': '#8b1022',
  'brand-3': '#560104',
  'brand-4': '#56584d',
  'brand-5': '#3f4541',
}

RGB Array

[180, 30, 67], [139, 16, 34], [86, 1, 4], [86, 88, 77], [63, 69, 65]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B41E43, #8B1022, #560104, #56584D, #3F4541 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: #b41e43; --color-2: #8b1022; --color-3: #560104; --color-4: #56584d; --color-5: #3f4541. 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 general-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