#581149 + #4B3661 + #394C84 + #16B0E4 + #22222E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#581149

Rose Purple · Purple · Eggplant

HEX

#581149

RGB

rgb(88, 17, 73)

HSL

hsl(313, 68%, 21%)

HSB

hsb(313, 81%, 35%)

CMYK

cmyk(0%, 81%, 17%, 65%)

Oklch

oklch(32.5% 0.121 338.1)

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

#4B3661

Deep Indigo · DarkSlateGray · Eggplant

HEX

#4B3661

RGB

rgb(75, 54, 97)

HSL

hsl(269, 28%, 30%)

HSB

hsb(269, 44%, 38%)

CMYK

cmyk(23%, 44%, 0%, 62%)

Oklch

oklch(37.6% 0.075 305.6)

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

#394C84

Indigo · DarkSlateBlue · Prussian Blue

HEX

#394C84

RGB

rgb(57, 76, 132)

HSL

hsl(225, 40%, 37%)

HSB

hsb(225, 57%, 52%)

CMYK

cmyk(57%, 42%, 0%, 48%)

Oklch

oklch(42.9% 0.096 268.1)

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

#16B0E4

Lake Blue · DeepSkyBlue · Mint Ice

HEX

#16B0E4

RGB

rgb(22, 176, 228)

HSL

hsl(195, 82%, 49%)

HSB

hsb(195, 90%, 89%)

CMYK

cmyk(90%, 23%, 0%, 11%)

Oklch

oklch(70.9% 0.136 228.9)

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

#22222E

Deep Indigo · DarkSlateGray · Deep Sea Blue

HEX

#22222E

RGB

rgb(34, 34, 46)

HSL

hsl(240, 15%, 16%)

HSB

hsb(240, 26%, 18%)

CMYK

cmyk(26%, 26%, 0%, 82%)

Oklch

oklch(25.7% 0.022 284.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

581149

115A21

Analogous

45115A

581149

5A1126

Triadic

581149

4A5A11

114A5A

Split-Comp.

581149

265A11

115A45

Tetradic

581149

5A4511

115A21

11265A

Contrast Matrix WCAG 2.1 Contrast

581149	4B3661	394C84	16B0E4	22222E
—	1.3 Fail	1.6 Fail	5.3 AA	1.2 Fail
1.3 Fail	—	1.3 Fail	4.2 AA Large	1.5 Fail
1.6 Fail	1.3 Fail	—	3.3 AA Large	1.9 Fail
5.3 AA	4.2 AA Large	3.3 AA Large	—	6.3 AA
1.2 Fail	1.5 Fail	1.9 Fail	6.3 AA	—

White BG

13.2AAA

10.5AAA

8.3AAA

2.5Fail

15.7AAA

Black BG

1.6Fail

2.0Fail

2.5Fail

8.4AAA

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

39393B

424257

414176

595AD7

22222B

Deuteranopia

3D4338

434554

403F73

5044D4

22222A

Tritanopia

54312E

4A4E4D

3A6C69

1ECDCB

222928

Achromatopsia

2D2D2D

414141

4D4D4D

888888

232323

Shades & Tints Shades & Tints

#581149

Dark

Light

#4B3661

Dark

Light

#394C84

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #581149;
  --color-2: #4b3661;
  --color-3: #394c84;
  --color-4: #16b0e4;
  --color-5: #22222e;
}

SCSS

$color-1: #581149;
$color-2: #4b3661;
$color-3: #394c84;
$color-4: #16b0e4;
$color-5: #22222e;

TAILWIND

colors: {
  'brand-1': '#581149',
  'brand-2': '#4b3661',
  'brand-3': '#394c84',
  'brand-4': '#16b0e4',
  'brand-5': '#22222e',
}

RGB Array

[88, 17, 73], [75, 54, 97], [57, 76, 132], [22, 176, 228], [34, 34, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #581149, #4B3661, #394C84, #16B0E4, #22222E is ideal for: tech websites, dark mode UIs, game UIs. 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: #581149; --color-2: #4b3661; --color-3: #394c84; --color-4: #16b0e4; --color-5: #22222e. 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. 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