#B21E2E + #912022 + #6C2624 + #55394F + #0961A9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B21E2E

Vermilion · FireBrick · Passion Red

HEX

#B21E2E

RGB

rgb(178, 30, 46)

HSL

hsl(354, 71%, 41%)

HSB

hsb(354, 83%, 70%)

CMYK

cmyk(0%, 83%, 74%, 30%)

Oklch

oklch(49.6% 0.181 22.3)

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

#912022

Vermilion · Brown · Wine Red

HEX

#912022

RGB

rgb(145, 32, 34)

HSL

hsl(359, 64%, 35%)

HSB

hsb(359, 78%, 57%)

CMYK

cmyk(0%, 78%, 77%, 43%)

Oklch

oklch(43.3% 0.149 25.2)

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

#6C2624

Crimson · Maroon · Wine Red

HEX

#6C2624

RGB

rgb(108, 38, 36)

HSL

hsl(2, 50%, 28%)

HSB

hsb(2, 67%, 42%)

CMYK

cmyk(0%, 65%, 67%, 58%)

Oklch

oklch(37.3% 0.101 24.9)

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

#55394F

Rose Purple · DarkSlateGray · Eggplant

HEX

#55394F

RGB

rgb(85, 57, 79)

HSL

hsl(313, 20%, 28%)

HSB

hsb(313, 33%, 33%)

CMYK

cmyk(0%, 33%, 7%, 67%)

Oklch

oklch(38.5% 0.052 334.5)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#0961A9

Lake Blue · Teal · Prussian Blue

HEX

#0961A9

RGB

rgb(9, 97, 169)

HSL

hsl(207, 90%, 35%)

HSB

hsb(207, 95%, 66%)

CMYK

cmyk(95%, 43%, 0%, 34%)

Oklch

oklch(48.6% 0.137 250.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B21E2E

1EB3A4

Analogous

B31E77

B21E2E

B35A1E

Triadic

B21E2E

2DB31E

1E2DB3

Split-Comp.

B21E2E

1EB35A

1E77B3

Tetradic

B21E2E

77B31E

1EB3A4

5A1EB3

Contrast Matrix WCAG 2.1 Contrast

B21E2E	912022	6C2624	55394F	0961A9
—	1.3 Fail	1.6 Fail	1.5 Fail	1.1 Fail
1.3 Fail	—	1.3 Fail	1.2 Fail	1.4 Fail
1.6 Fail	1.3 Fail	—	1.1 Fail	1.7 Fail
1.5 Fail	1.2 Fail	1.1 Fail	—	1.6 Fail
1.1 Fail	1.4 Fail	1.7 Fail	1.6 Fail	—

White BG

6.7AA

8.6AAA

10.8AAA

10.1AAA

6.4AA

Black BG

3.1AA Large

2.4Fail

1.9Fail

2.1Fail

3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

72712A

605F22

4E4D24

49494A

2F3098

Deuteranopia

7B8629

676F21

525725

4B4D48

2A2393

Tritanopia

AB2726

8B2121

692525

544545

0D8A87

Achromatopsia

4C4C4C

424242

3B3B3B

444444

4F4F4F

Shades & Tints Shades & Tints

#B21E2E

Dark

Light

#912022

Dark

Light

#6C2624

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b21e2e;
  --color-2: #912022;
  --color-3: #6c2624;
  --color-4: #55394f;
  --color-5: #0961a9;
}

SCSS

$color-1: #b21e2e;
$color-2: #912022;
$color-3: #6c2624;
$color-4: #55394f;
$color-5: #0961a9;

TAILWIND

colors: {
  'brand-1': '#b21e2e',
  'brand-2': '#912022',
  'brand-3': '#6c2624',
  'brand-4': '#55394f',
  'brand-5': '#0961a9',
}

RGB Array

[178, 30, 46], [145, 32, 34], [108, 38, 36], [85, 57, 79], [9, 97, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B21E2E, #912022, #6C2624, #55394F, #0961A9 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: #b21e2e; --color-2: #912022; --color-3: #6c2624; --color-4: #55394f; --color-5: #0961a9. 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