← Back to Editor

#0E0C16 · #1D032B · #57585D · #F54F66 · #F4444F

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

#0E0C16

Deep Indigo · Black · Deep Sea Blue

HEX
#0E0C16
RGB
rgb(14, 12, 22)
HSL
hsl(252, 29%, 7%)
HSB
hsb(252, 45%, 9%)
CMYK
cmyk(36%, 45%, 0%, 91%)
Oklch
oklch(16.2% 0.021 293.1)

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

#1D032B

Royal Purple · Black · Dark Purple

HEX
#1D032B
RGB
rgb(29, 3, 43)
HSL
hsl(279, 87%, 9%)
HSB
hsb(279, 93%, 17%)
CMYK
cmyk(33%, 93%, 0%, 83%)
Oklch
oklch(18.2% 0.080 311.1)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#57585D

Ink Gray · DimGray · Charcoal

HEX
#57585D
RGB
rgb(87, 88, 93)
HSL
hsl(230, 3%, 35%)
HSB
hsb(230, 6%, 36%)
CMYK
cmyk(6%, 5%, 0%, 64%)
Oklch
oklch(46.1% 0.008 277.0)

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

#F54F66

Peach Pink · Tomato · Coral Red

HEX
#F54F66
RGB
rgb(245, 79, 102)
HSL
hsl(352, 89%, 64%)
HSB
hsb(352, 68%, 96%)
CMYK
cmyk(0%, 68%, 58%, 4%)
Oklch
oklch(66.3% 0.201 16.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F4444F

Peach Pink · Tomato · Coral Red

HEX
#F4444F
RGB
rgb(244, 68, 79)
HSL
hsl(356, 89%, 61%)
HSB
hsb(356, 72%, 96%)
CMYK
cmyk(0%, 72%, 68%, 4%)
Oklch
oklch(64.7% 0.212 22.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0E0C16
15170D

Analogous

0D1017
0E0C16
140D17

Triadic

0E0C16
170F0D
0D170F

Split-Comp.

0E0C16
17140D
10170D

Tetradic

0E0C16
170D10
15170D
0D1714

Contrast Matrix WCAG 2.1 Contrast

0E0C16
1D032B
57585D
F54F66
F4444F
—
1.0
Fail
2.7
Fail
5.7
AA
5.3
AA
1.0
Fail
—
2.7
Fail
5.6
AA
5.3
AA
2.7
Fail
2.7
Fail
—
2.1
Fail
2.0
Fail
5.7
AA
5.6
AA
2.1
Fail
—
1.1
Fail
5.3
AA
5.3
AA
2.0
Fail
1.1
Fail
—
White BG
19.4AAA
19.1AAA
7.1AAA
3.4AA Large
3.6AA Large
Black BG
1.1Fail
1.1Fail
3.0Fail
6.2AA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0D0D14
121221
57575C
ADAC60
A8A64C

Deuteranopia

0D0D13
13151F
57575C
B7C35F
B2BF4C

Tritanopia

0E1211
1C1A18
575B5B
ED5C5B
EB4A4A

Achromatopsia

0E0E0E
0F0F0F
585858
838383
7A7A7A

Shades & Tints Shades & Tints

#0E0C16

Dark
Light

#1D032B

Dark
Light

#57585D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0e0c16;
  --color-2: #1d032b;
  --color-3: #57585d;
  --color-4: #f54f66;
  --color-5: #f4444f;
}

SCSS

$color-1: #0e0c16;
$color-2: #1d032b;
$color-3: #57585d;
$color-4: #f54f66;
$color-5: #f4444f;

TAILWIND

colors: {
  'brand-1': '#0e0c16',
  'brand-2': '#1d032b',
  'brand-3': '#57585d',
  'brand-4': '#f54f66',
  'brand-5': '#f4444f',
}

RGB Array

[14, 12, 22], [29, 3, 43], [87, 88, 93], [245, 79, 102], [244, 68, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0E0C16, #1D032B, #57585D, #F54F66, #F4444F 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: #0e0c16; --color-2: #1d032b; --color-3: #57585d; --color-4: #f54f66; --color-5: #f4444f. 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