← Back to Editor

#D9183E · #8C1861 · #4401A6 · #2F054D · #000000

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#D9183E

Vermilion · Crimson · Passion Red

HEX
#D9183E
RGB
rgb(217, 24, 62)
HSL
hsl(348, 80%, 47%)
HSB
hsb(348, 89%, 85%)
CMYK
cmyk(0%, 89%, 71%, 15%)
Oklch
oklch(56.7% 0.218 19.5)

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

#8C1861

Rose Purple · Purple · Camellia

HEX
#8C1861
RGB
rgb(140, 24, 97)
HSL
hsl(322, 71%, 32%)
HSB
hsb(322, 83%, 55%)
CMYK
cmyk(0%, 83%, 31%, 45%)
Oklch
oklch(43.6% 0.164 347.9)

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

#4401A6

Deep Indigo · DarkSlateBlue · Eggplant

HEX
#4401A6
RGB
rgb(68, 1, 166)
HSL
hsl(264, 99%, 33%)
HSB
hsb(264, 99%, 65%)
CMYK
cmyk(59%, 99%, 0%, 35%)
Oklch
oklch(37.0% 0.212 287.5)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#2F054D

Royal Purple · MidnightBlue · Dark Purple

HEX
#2F054D
RGB
rgb(47, 5, 77)
HSL
hsl(275, 88%, 16%)
HSB
hsb(275, 94%, 30%)
CMYK
cmyk(39%, 94%, 0%, 70%)
Oklch
oklch(24.8% 0.119 305.0)

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

#000000

Ink Black · Black · Jet Black

HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
HSB
hsb(0, 0%, 0%)
CMYK
cmyk(0%, 0%, 0%, 100%)
Oklch
oklch(0.0% 0.000 0.0)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9183E
18D8B1

Analogous

D8189E
D9183E
D85118

Triadic

D9183E
3ED818
183ED8

Split-Comp.

D9183E
18D851
189ED8

Tetradic

D9183E
9ED818
18D8B1
5118D8

Contrast Matrix WCAG 2.1 Contrast

D9183E
8C1861
4401A6
2F054D
000000
—
1.7
Fail
2.3
Fail
3.3
AA Large
4.2
AA Large
1.7
Fail
—
1.3
Fail
1.9
Fail
2.4
Fail
2.3
Fail
1.3
Fail
—
1.4
Fail
1.8
Fail
3.3
AA Large
1.9
Fail
1.4
Fail
—
1.2
Fail
4.2
AA Large
2.4
Fail
1.8
Fail
1.2
Fail
—
White BG
5.1AA
8.7AAA
11.7AAA
16.8AAA
21.0AAA
Black BG
4.2AA Large
2.4Fail
1.8Fail
1.2Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

858435
5A594F
27267E
1D1C3C
000000

Deuteranopia

919F33
61694B
2B3074
1F2237
000000

Tritanopia

CF2E2C
86413E
415F58
2D2E2B
000000

Achromatopsia

565656
434343
282828
1A1A1A
000000

Shades & Tints Shades & Tints

#D9183E

Dark
Light

#8C1861

Dark
Light

#4401A6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9183e;
  --color-2: #8c1861;
  --color-3: #4401a6;
  --color-4: #2f054d;
  --color-5: #000000;
}

SCSS

$color-1: #d9183e;
$color-2: #8c1861;
$color-3: #4401a6;
$color-4: #2f054d;
$color-5: #000000;

TAILWIND

colors: {
  'brand-1': '#d9183e',
  'brand-2': '#8c1861',
  'brand-3': '#4401a6',
  'brand-4': '#2f054d',
  'brand-5': '#000000',
}

RGB Array

[217, 24, 62], [140, 24, 97], [68, 1, 166], [47, 5, 77], [0, 0, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9183E, #8C1861, #4401A6, #2F054D, #000000 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d9183e; --color-2: #8c1861; --color-3: #4401a6; --color-4: #2f054d; --color-5: #000000. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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