← Back to Editor

#100F0F · #5D0F5D · #6C3EF7 · #27A2FD · #19F2FC

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

#100F0F

Ink Black · Black · Jet Black

HEX
#100F0F
RGB
rgb(16, 15, 15)
HSL
hsl(0, 3%, 6%)
HSB
hsb(0, 6%, 6%)
CMYK
cmyk(0%, 6%, 6%, 94%)
Oklch
oklch(17.0% 0.002 17.3)

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

#5D0F5D

Rose Purple · Purple · Eggplant

HEX
#5D0F5D
RGB
rgb(93, 15, 93)
HSL
hsl(300, 72%, 21%)
HSB
hsb(300, 84%, 36%)
CMYK
cmyk(0%, 84%, 0%, 64%)
Oklch
oklch(34.5% 0.142 328.1)

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

#6C3EF7

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#6C3EF7
RGB
rgb(108, 62, 247)
HSL
hsl(255, 92%, 61%)
HSB
hsb(255, 75%, 97%)
CMYK
cmyk(56%, 75%, 0%, 3%)
Oklch
oklch(53.9% 0.254 285.6)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#27A2FD

Lake Blue · DodgerBlue · Navy Blue

HEX
#27A2FD
RGB
rgb(39, 162, 253)
HSL
hsl(206, 98%, 57%)
HSB
hsb(206, 85%, 99%)
CMYK
cmyk(85%, 36%, 0%, 1%)
Oklch
oklch(69.2% 0.168 246.9)

Traditional「Lake Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#19F2FC

Lake Blue · Cyan · Lake Green

HEX
#19F2FC
RGB
rgb(25, 242, 252)
HSL
hsl(183, 97%, 54%)
HSB
hsb(183, 90%, 99%)
CMYK
cmyk(90%, 4%, 0%, 1%)
Oklch
oklch(87.5% 0.146 200.2)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

100F0F
0F1010

Analogous

100F0F
100F0F
100F0F

Triadic

100F0F
0F100F
0F0F10

Split-Comp.

100F0F
0F100F
0F0F10

Tetradic

100F0F
0F100F
0F1010
0F0F10

Contrast Matrix WCAG 2.1 Contrast

100F0F
5D0F5D
6C3EF7
27A2FD
19F2FC
—
1.5
Fail
3.3
AA Large
7.0
AA
13.8
AAA
1.5
Fail
—
2.2
Fail
4.5
AA
9.0
AAA
3.3
AA Large
2.2
Fail
—
2.1
Fail
4.1
AA Large
7.0
AA
4.5
AA
2.1
Fail
—
2.0
Fail
13.8
AAA
9.0
AAA
4.1
AA Large
2.0
Fail
—
White BG
19.1AAA
12.4AAA
5.7AA
2.7Fail
1.4Fail
Black BG
1.1Fail
1.7Fail
3.7AA Large
7.7AAA
15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

10100F
3B3B4A
5858CA
5C5DE7
7779FA

Deuteranopia

10100F
404646
5B5EBF
554CE2
6A5AF9

Tritanopia

100F0F
593B38
6AA79F
2DD6D2
24F8F7

Achromatopsia

0F0F0F
2F2F2F
616161
888888
B2B2B2

Shades & Tints Shades & Tints

#100F0F

Dark
Light

#5D0F5D

Dark
Light

#6C3EF7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #100f0f;
  --color-2: #5d0f5d;
  --color-3: #6c3ef7;
  --color-4: #27a2fd;
  --color-5: #19f2fc;
}

SCSS

$color-1: #100f0f;
$color-2: #5d0f5d;
$color-3: #6c3ef7;
$color-4: #27a2fd;
$color-5: #19f2fc;

TAILWIND

colors: {
  'brand-1': '#100f0f',
  'brand-2': '#5d0f5d',
  'brand-3': '#6c3ef7',
  'brand-4': '#27a2fd',
  'brand-5': '#19f2fc',
}

RGB Array

[16, 15, 15], [93, 15, 93], [108, 62, 247], [39, 162, 253], [25, 242, 252]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #100F0F, #5D0F5D, #6C3EF7, #27A2FD, #19F2FC 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: #100f0f; --color-2: #5d0f5d; --color-3: #6c3ef7; --color-4: #27a2fd; --color-5: #19f2fc. 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