← Back to Editor

#51434E · #0E0E1B · #B83786 · #E33F36 · #FF4E21

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#51434E

Rose Purple · DarkSlateGray · Charcoal

HEX
#51434E
RGB
rgb(81, 67, 78)
HSL
hsl(313, 9%, 29%)
HSB
hsb(313, 17%, 32%)
CMYK
cmyk(0%, 17%, 4%, 68%)
Oklch
oklch(40.1% 0.026 333.5)

Traditional「Rose Purple」· Paint「Charcoal」· Creative Midnight Shadow

#0E0E1B

Deep Indigo · Black · Deep Sea Blue

HEX
#0E0E1B
RGB
rgb(14, 14, 27)
HSL
hsl(240, 32%, 8%)
HSB
hsb(240, 48%, 11%)
CMYK
cmyk(48%, 48%, 0%, 89%)
Oklch
oklch(17.1% 0.027 283.2)

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

#B83786

Rose Purple · MediumVioletRed · Camellia

HEX
#B83786
RGB
rgb(184, 55, 134)
HSL
hsl(323, 54%, 47%)
HSB
hsb(323, 70%, 72%)
CMYK
cmyk(0%, 70%, 27%, 28%)
Oklch
oklch(55.1% 0.183 347.1)

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

#E33F36

Vermilion · Crimson · Passion Red

HEX
#E33F36
RGB
rgb(227, 63, 54)
HSL
hsl(3, 76%, 55%)
HSB
hsb(3, 76%, 89%)
CMYK
cmyk(0%, 72%, 76%, 11%)
Oklch
oklch(61.0% 0.202 28.0)

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

#FF4E21

Vermilion · OrangeRed · Passion Red

HEX
#FF4E21
RGB
rgb(255, 78, 33)
HSL
hsl(12, 100%, 56%)
HSB
hsb(12, 87%, 100%)
CMYK
cmyk(0%, 69%, 87%, 0%)
Oklch
oklch(67.0% 0.220 34.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

51434E
435146

Analogous

4D4351
51434E
514347

Triadic

51434E
4E5143
434E51

Split-Comp.

51434E
475143
43514D

Tetradic

51434E
514D43
435146
434751

Contrast Matrix WCAG 2.1 Contrast

51434E
0E0E1B
B83786
E33F36
FF4E21
—
2.1
Fail
1.7
Fail
2.2
Fail
2.8
Fail
2.1
Fail
—
3.6
AA Large
4.6
AA
5.8
AA
1.7
Fail
3.6
AA Large
—
1.3
Fail
1.6
Fail
2.2
Fail
4.6
AA
1.3
Fail
—
1.3
Fail
2.8
Fail
5.8
AA
1.6
Fail
1.3
Fail
—
White BG
9.3AAA
19.1AAA
5.3AA
4.2AA Large
3.3AA Large
Black BG
2.3Fail
1.1Fail
3.9AA Large
5.0AA
6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B4B
0E0E18
807F73
9C9B38
B2B12C

Deuteranopia

4C4D4B
0E0E17
88916E
A6B239
BDCA2F

Tritanopia

504949
0E1515
B26460
DB3A3A
F63436

Achromatopsia

484848
0F0F0F
676767
6F6F6F
7E7E7E

Shades & Tints Shades & Tints

#51434E

Dark
Light

#0E0E1B

Dark
Light

#B83786

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #51434e;
  --color-2: #0e0e1b;
  --color-3: #b83786;
  --color-4: #e33f36;
  --color-5: #ff4e21;
}

SCSS

$color-1: #51434e;
$color-2: #0e0e1b;
$color-3: #b83786;
$color-4: #e33f36;
$color-5: #ff4e21;

TAILWIND

colors: {
  'brand-1': '#51434e',
  'brand-2': '#0e0e1b',
  'brand-3': '#b83786',
  'brand-4': '#e33f36',
  'brand-5': '#ff4e21',
}

RGB Array

[81, 67, 78], [14, 14, 27], [184, 55, 134], [227, 63, 54], [255, 78, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #51434E, #0E0E1B, #B83786, #E33F36, #FF4E21 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #51434e; --color-2: #0e0e1b; --color-3: #b83786; --color-4: #e33f36; --color-5: #ff4e21. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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