← Back to Editor

#8D9CD5 · #263CA9 · #10168E · #00017A · #020238

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#8D9CD5

Azure · CornflowerBlue · Cobalt Blue

HEX
#8D9CD5
RGB
rgb(141, 156, 213)
HSL
hsl(228, 46%, 69%)
HSB
hsb(228, 34%, 84%)
CMYK
cmyk(34%, 27%, 0%, 16%)
Oklch
oklch(70.3% 0.086 272.7)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#263CA9

Indigo · DarkSlateBlue · Navy Blue

HEX
#263CA9
RGB
rgb(38, 60, 169)
HSL
hsl(230, 63%, 41%)
HSB
hsb(230, 78%, 66%)
CMYK
cmyk(78%, 64%, 0%, 34%)
Oklch
oklch(41.5% 0.176 268.4)

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

#10168E

Indigo · Navy · Prussian Blue

HEX
#10168E
RGB
rgb(16, 22, 142)
HSL
hsl(237, 80%, 31%)
HSB
hsb(237, 89%, 56%)
CMYK
cmyk(89%, 85%, 0%, 44%)
Oklch
oklch(31.6% 0.186 267.6)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#00017A

Deep Indigo · Navy · Prussian Blue

HEX
#00017A
RGB
rgb(0, 1, 122)
HSL
hsl(240, 100%, 24%)
HSB
hsb(240, 100%, 48%)
CMYK
cmyk(100%, 99%, 0%, 52%)
Oklch
oklch(26.3% 0.181 264.1)

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

#020238

Deep Indigo · Black · Deep Sea Blue

HEX
#020238
RGB
rgb(2, 2, 56)
HSL
hsl(240, 93%, 11%)
HSB
hsb(240, 96%, 22%)
CMYK
cmyk(96%, 96%, 0%, 78%)
Oklch
oklch(16.2% 0.102 267.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8D9CD5
D4C68C

Analogous

8CBED4
8D9CD5
A18CD4

Triadic

8D9CD5
D48C9A
9AD48C

Split-Comp.

8D9CD5
D4A18C
BED48C

Tetradic

8D9CD5
D48CBE
D4C68C
8CD4A1

Contrast Matrix WCAG 2.1 Contrast

8D9CD5
263CA9
10168E
00017A
020238
—
3.4
AA Large
5.1
AA
6.1
AA
7.3
AAA
3.4
AA Large
—
1.5
Fail
1.8
Fail
2.2
Fail
5.1
AA
1.5
Fail
—
1.2
Fail
1.4
Fail
6.1
AA
1.8
Fail
1.2
Fail
—
1.2
Fail
7.3
AAA
2.2
Fail
1.4
Fail
1.2
Fail
—
White BG
2.7Fail
9.1AAA
13.7AAA
16.3AAA
19.7AAA
Black BG
7.8AAA
2.3Fail
1.5Fail
1.3Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9394C7
30308F
131371
00005D
02022B

Deuteranopia

9392C4
2E2D88
12126A
000056
020228

Tritanopia

8EBCBA
277A75
105A55
004641
02211E

Achromatopsia

9E9E9E
424242
222222
0E0E0E
080808

Shades & Tints Shades & Tints

#8D9CD5

Dark
Light

#263CA9

Dark
Light

#10168E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8d9cd5;
  --color-2: #263ca9;
  --color-3: #10168e;
  --color-4: #00017a;
  --color-5: #020238;
}

SCSS

$color-1: #8d9cd5;
$color-2: #263ca9;
$color-3: #10168e;
$color-4: #00017a;
$color-5: #020238;

TAILWIND

colors: {
  'brand-1': '#8d9cd5',
  'brand-2': '#263ca9',
  'brand-3': '#10168e',
  'brand-4': '#00017a',
  'brand-5': '#020238',
}

RGB Array

[141, 156, 213], [38, 60, 169], [16, 22, 142], [0, 1, 122], [2, 2, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8D9CD5, #263CA9, #10168E, #00017A, #020238 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: #8d9cd5; --color-2: #263ca9; --color-3: #10168e; --color-4: #00017a; --color-5: #020238. 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