← Back to Editor

#5510C4 · #121111 · #202233 · #70497A · #B58BB2

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

#5510C4

Deep Indigo · DarkViolet · Violet

HEX
#5510C4
RGB
rgb(85, 16, 196)
HSL
hsl(263, 85%, 42%)
HSB
hsb(263, 92%, 77%)
CMYK
cmyk(57%, 92%, 0%, 23%)
Oklch
oklch(42.8% 0.235 288.4)

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

#121111

Ink Black · Black · Jet Black

HEX
#121111
RGB
rgb(18, 17, 17)
HSL
hsl(0, 3%, 7%)
HSB
hsb(0, 6%, 7%)
CMYK
cmyk(0%, 6%, 6%, 93%)
Oklch
oklch(17.9% 0.002 17.3)

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

#202233

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#202233
RGB
rgb(32, 34, 51)
HSL
hsl(234, 23%, 16%)
HSB
hsb(234, 37%, 20%)
CMYK
cmyk(37%, 33%, 0%, 80%)
Oklch
oklch(25.8% 0.032 278.7)

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

#70497A

Dark Plum · DimGray · Eggplant

HEX
#70497A
RGB
rgb(112, 73, 122)
HSL
hsl(288, 25%, 38%)
HSB
hsb(288, 40%, 48%)
CMYK
cmyk(8%, 40%, 0%, 52%)
Oklch
oklch(46.9% 0.090 319.3)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#B58BB2

Mauve · DarkGray · Lilac Purple

HEX
#B58BB2
RGB
rgb(181, 139, 178)
HSL
hsl(304, 22%, 63%)
HSB
hsb(304, 23%, 71%)
CMYK
cmyk(0%, 23%, 2%, 29%)
Oklch
oklch(68.9% 0.074 328.7)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5510C4
80C610

Analogous

1025C6
5510C4
B110C6

Triadic

5510C4
C65610
10C656

Split-Comp.

5510C4
C6B110
25C610

Tetradic

5510C4
C61025
80C610
10C6B1

Contrast Matrix WCAG 2.1 Contrast

5510C4
121111
202233
70497A
B58BB2
—
2.0
Fail
1.7
Fail
1.3
Fail
3.2
AA Large
2.0
Fail
—
1.2
Fail
2.6
Fail
6.6
AA
1.7
Fail
1.2
Fail
—
2.2
Fail
5.5
AA
1.3
Fail
2.6
Fail
2.2
Fail
—
2.5
Fail
3.2
AA Large
6.6
AA
5.5
AA
2.5
Fail
—
White BG
9.3AAA
18.9AAA
15.7AAA
7.2AAA
2.9Fail
Black BG
2.3Fail
1.1Fail
1.3Fail
2.9Fail
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

373798
121211
21212F
5F5F6E
A3A2A9

Deuteranopia

3B408E
121211
21212E
61646B
A5A8A6

Tritanopia

52766F
121111
202C2B
6E6563
B3A19F

Achromatopsia

393939
111111
232323
5A5A5A
9C9C9C

Shades & Tints Shades & Tints

#5510C4

Dark
Light

#121111

Dark
Light

#202233

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5510c4;
  --color-2: #121111;
  --color-3: #202233;
  --color-4: #70497a;
  --color-5: #b58bb2;
}

SCSS

$color-1: #5510c4;
$color-2: #121111;
$color-3: #202233;
$color-4: #70497a;
$color-5: #b58bb2;

TAILWIND

colors: {
  'brand-1': '#5510c4',
  'brand-2': '#121111',
  'brand-3': '#202233',
  'brand-4': '#70497a',
  'brand-5': '#b58bb2',
}

RGB Array

[85, 16, 196], [18, 17, 17], [32, 34, 51], [112, 73, 122], [181, 139, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5510C4, #121111, #202233, #70497A, #B58BB2 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: #5510c4; --color-2: #121111; --color-3: #202233; --color-4: #70497a; --color-5: #b58bb2. 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