#E31031 + #C51834 + #801E2D + #563331 + #39412C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E31031

Vermilion · Crimson · Passion Red

HEX

#E31031

RGB

rgb(227, 16, 49)

HSL

hsl(351, 87%, 48%)

HSB

hsb(351, 93%, 89%)

CMYK

cmyk(0%, 93%, 78%, 11%)

Oklch

oklch(58.2% 0.230 23.2)

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

#C51834

Vermilion · Crimson · Passion Red

HEX

#C51834

RGB

rgb(197, 24, 52)

HSL

hsl(350, 78%, 43%)

HSB

hsb(350, 88%, 77%)

CMYK

cmyk(0%, 88%, 74%, 23%)

Oklch

oklch(52.9% 0.201 21.0)

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

#801E2D

Vermilion · Brown · Wine Red

HEX

#801E2D

RGB

rgb(128, 30, 45)

HSL

hsl(351, 62%, 31%)

HSB

hsb(351, 77%, 50%)

CMYK

cmyk(0%, 77%, 65%, 50%)

Oklch

oklch(40.2% 0.132 17.2)

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

#563331

Crimson · DarkOliveGreen · Wine Red

HEX

#563331

RGB

rgb(86, 51, 49)

HSL

hsl(3, 27%, 26%)

HSB

hsb(3, 43%, 34%)

CMYK

cmyk(0%, 41%, 43%, 66%)

Oklch

oklch(36.3% 0.051 23.4)

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

#39412C

Grass Green · DarkSlateGray · Forest Green

HEX

#39412C

RGB

rgb(57, 65, 44)

HSL

hsl(83, 19%, 21%)

HSB

hsb(83, 32%, 25%)

CMYK

cmyk(12%, 0%, 32%, 75%)

Oklch

oklch(36.1% 0.036 125.1)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E31031

10E5C5

Analogous

E5109A

E31031

E55A10

Triadic

E31031

30E510

1030E5

Split-Comp.

E31031

10E55A

109AE5

Tetradic

E31031

9AE510

10E5C5

5A10E5

Contrast Matrix WCAG 2.1 Contrast

E31031	C51834	801E2D	563331	39412C
—	1.2 Fail	2.0 Fail	2.3 Fail	2.2 Fail
1.2 Fail	—	1.7 Fail	1.9 Fail	1.8 Fail
2.0 Fail	1.7 Fail	—	1.1 Fail	1.1 Fail
2.3 Fail	1.9 Fail	1.1 Fail	—	1.0 Fail
2.2 Fail	1.8 Fail	1.1 Fail	1.0 Fail	—

White BG

4.8AA

5.9AA

9.8AAA

11.0AAA

10.7AAA

Black BG

4.4AA Large

3.6AA Large

2.1Fail

1.9Fail

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

888629

7A792D

565529

474731

3C3D31

Deuteranopia

94A427

84912C

5B6329

494C32

3C3B32

Tritanopia

D82321

BC2827

7B2726

543232

393536

Achromatopsia

535353

4F4F4F

3D3D3D

3C3C3C

Shades & Tints Shades & Tints

#E31031

Dark

Light

#C51834

Dark

Light

#801E2D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e31031;
  --color-2: #c51834;
  --color-3: #801e2d;
  --color-4: #563331;
  --color-5: #39412c;
}

SCSS

$color-1: #e31031;
$color-2: #c51834;
$color-3: #801e2d;
$color-4: #563331;
$color-5: #39412c;

TAILWIND

colors: {
  'brand-1': '#e31031',
  'brand-2': '#c51834',
  'brand-3': '#801e2d',
  'brand-4': '#563331',
  'brand-5': '#39412c',
}

RGB Array

[227, 16, 49], [197, 24, 52], [128, 30, 45], [86, 51, 49], [57, 65, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E31031, #C51834, #801E2D, #563331, #39412C 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: #e31031; --color-2: #c51834; --color-3: #801e2d; --color-4: #563331; --color-5: #39412c. 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