#2E244D + #8C0701 + #801B16 + #592A27 + #302947 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2E244D

Deep Indigo · MidnightBlue · Prussian Blue

HEX

#2E244D

RGB

rgb(46, 36, 77)

HSL

hsl(255, 36%, 22%)

HSB

hsb(255, 53%, 30%)

CMYK

cmyk(40%, 53%, 0%, 70%)

Oklch

oklch(29.4% 0.073 292.6)

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

#8C0701

Vermilion · DarkRed · Wine Red

HEX

#8C0701

RGB

rgb(140, 7, 1)

HSL

hsl(3, 99%, 28%)

HSB

hsb(3, 99%, 55%)

CMYK

cmyk(0%, 95%, 99%, 45%)

Oklch

oklch(40.5% 0.162 29.8)

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

#801B16

Vermilion · Maroon · Wine Red

HEX

#801B16

RGB

rgb(128, 27, 22)

HSL

hsl(3, 71%, 29%)

HSB

hsb(3, 83%, 50%)

CMYK

cmyk(0%, 79%, 83%, 50%)

Oklch

oklch(39.5% 0.137 28.2)

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

#592A27

Crimson · DarkOliveGreen · Wine Red

HEX

#592A27

RGB

rgb(89, 42, 39)

HSL

hsl(4, 39%, 25%)

HSB

hsb(4, 56%, 35%)

CMYK

cmyk(0%, 53%, 56%, 65%)

Oklch

oklch(34.8% 0.070 25.1)

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

#302947

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#302947

RGB

rgb(48, 41, 71)

HSL

hsl(254, 27%, 22%)

HSB

hsb(254, 42%, 28%)

CMYK

cmyk(32%, 42%, 0%, 72%)

Oklch

oklch(30.3% 0.054 293.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E244D

424C24

Analogous

242E4C

2E244D

42244C

Triadic

2E244D

4C2E24

244C2E

Split-Comp.

2E244D

4C4224

2E4C24

Tetradic

2E244D

4C242E

424C24

244C42

Contrast Matrix WCAG 2.1 Contrast

2E244D	8C0701	801B16	592A27	302947
—	1.5 Fail	1.4 Fail	1.2 Fail	1.0 Fail
1.5 Fail	—	1.0 Fail	1.2 Fail	1.4 Fail
1.4 Fail	1.0 Fail	—	1.2 Fail	1.4 Fail
1.2 Fail	1.2 Fail	1.2 Fail	—	1.2 Fail
1.0 Fail	1.4 Fail	1.4 Fail	1.2 Fail	—

White BG

14.2AAA

9.8AAA

10.1AAA

11.8AAA

13.7AAA

Black BG

1.5Fail

2.1Fail

1.8Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A43

525102

545317

454428

2D2D40

Deuteranopia

2A2B41

5A6403

5A6218

474B28

2D2E3E

Tritanopia

2D3B3A

850404

7B1818

572828

303A39

Achromatopsia

2C2C2C

2E2E2E

393939

383838

2F2F2F

Shades & Tints Shades & Tints

#2E244D

Dark

Light

#8C0701

Dark

Light

#801B16

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e244d;
  --color-2: #8c0701;
  --color-3: #801b16;
  --color-4: #592a27;
  --color-5: #302947;
}

SCSS

$color-1: #2e244d;
$color-2: #8c0701;
$color-3: #801b16;
$color-4: #592a27;
$color-5: #302947;

TAILWIND

colors: {
  'brand-1': '#2e244d',
  'brand-2': '#8c0701',
  'brand-3': '#801b16',
  'brand-4': '#592a27',
  'brand-5': '#302947',
}

RGB Array

[46, 36, 77], [140, 7, 1], [128, 27, 22], [89, 42, 39], [48, 41, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2E244D, #8C0701, #801B16, #592A27, #302947 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: #2e244d; --color-2: #8c0701; --color-3: #801b16; --color-4: #592a27; --color-5: #302947. 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