#04117A + #5428B1 + #873EC1 + #7066A2 + #5790A3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#04117A

Indigo · Navy · Prussian Blue

HEX

#04117A

RGB

rgb(4, 17, 122)

HSL

hsl(233, 94%, 25%)

HSB

hsb(233, 97%, 48%)

CMYK

cmyk(97%, 86%, 0%, 52%)

Oklch

oklch(28.0% 0.169 265.3)

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

#5428B1

Deep Indigo · DarkSlateBlue · Navy Blue

HEX

#5428B1

RGB

rgb(84, 40, 177)

HSL

hsl(259, 63%, 43%)

HSB

hsb(259, 77%, 69%)

CMYK

cmyk(53%, 77%, 0%, 31%)

Oklch

oklch(42.7% 0.199 289.8)

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

#873EC1

Royal Purple · DarkOrchid · Violet

HEX

#873EC1

RGB

rgb(135, 62, 193)

HSL

hsl(273, 51%, 50%)

HSB

hsb(273, 68%, 76%)

CMYK

cmyk(30%, 68%, 0%, 24%)

Oklch

oklch(52.3% 0.198 306.2)

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

#7066A2

Deep Indigo · SlateGray · Navy Blue

HEX

#7066A2

RGB

rgb(112, 102, 162)

HSL

hsl(250, 24%, 52%)

HSB

hsb(250, 37%, 64%)

CMYK

cmyk(31%, 37%, 0%, 36%)

Oklch

oklch(54.5% 0.093 290.6)

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

#5790A3

Slate Blue · CadetBlue · Mint Ice

HEX

#5790A3

RGB

rgb(87, 144, 163)

HSL

hsl(195, 30%, 49%)

HSB

hsb(195, 47%, 64%)

CMYK

cmyk(47%, 12%, 0%, 36%)

Oklch

oklch(62.1% 0.066 221.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

04117A

7C6E04

Analogous

044E7C

04117A

32047C

Triadic

04117A

7C0412

127C04

Split-Comp.

04117A

7C3204

4E7C04

Tetradic

04117A

7C044E

7C6E04

047C32

Contrast Matrix WCAG 2.1 Contrast

04117A	5428B1	873EC1	7066A2	5790A3
—	1.7 Fail	2.6 Fail	3.0 AA Large	4.3 AA Large
1.7 Fail	—	1.5 Fail	1.8 Fail	2.6 Fail
2.6 Fail	1.5 Fail	—	1.2 Fail	1.7 Fail
3.0 AA Large	1.8 Fail	1.2 Fail	—	1.4 Fail
4.3 AA Large	2.6 Fail	1.7 Fail	1.4 Fail	—

White BG

15.4AAA

9.1AAA

6.0AA

5.1AA

3.5AA Large

Black BG

1.4Fail

2.3Fail

3.5AA Large

4.1AA Large

5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0A0A61

414190

6767A1

6C6C93

70709E

Deuteranopia

09085A

444788

6C719A

6C6D90

6C689D

Tritanopia

054D48

527670

838883

6F8886

5A9B9A

Achromatopsia

191919

454545

636363

707070

818181

Shades & Tints Shades & Tints

#04117A

Dark

Light

#5428B1

Dark

Light

#873EC1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #04117a;
  --color-2: #5428b1;
  --color-3: #873ec1;
  --color-4: #7066a2;
  --color-5: #5790a3;
}

SCSS

$color-1: #04117a;
$color-2: #5428b1;
$color-3: #873ec1;
$color-4: #7066a2;
$color-5: #5790a3;

TAILWIND

colors: {
  'brand-1': '#04117a',
  'brand-2': '#5428b1',
  'brand-3': '#873ec1',
  'brand-4': '#7066a2',
  'brand-5': '#5790a3',
}

RGB Array

[4, 17, 122], [84, 40, 177], [135, 62, 193], [112, 102, 162], [87, 144, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #04117A, #5428B1, #873EC1, #7066A2, #5790A3 is ideal for: corporate websites, product showcases, portfolios. 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: #04117a; --color-2: #5428b1; --color-3: #873ec1; --color-4: #7066a2; --color-5: #5790a3. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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