#4A427A + #5B3982 + #4B2A96 + #30228C + #4305FC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4A427A

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#4A427A

RGB

rgb(74, 66, 122)

HSL

hsl(249, 30%, 37%)

HSB

hsb(249, 46%, 48%)

CMYK

cmyk(39%, 46%, 0%, 52%)

Oklch

oklch(41.4% 0.092 288.3)

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

#5B3982

Deep Indigo · DarkSlateBlue · Eggplant

HEX

#5B3982

RGB

rgb(91, 57, 130)

HSL

hsl(268, 39%, 37%)

HSB

hsb(268, 56%, 51%)

CMYK

cmyk(30%, 56%, 0%, 49%)

Oklch

oklch(42.0% 0.120 303.1)

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

#4B2A96

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#4B2A96

RGB

rgb(75, 42, 150)

HSL

hsl(258, 56%, 38%)

HSB

hsb(258, 72%, 59%)

CMYK

cmyk(50%, 72%, 0%, 41%)

Oklch

oklch(39.5% 0.165 290.8)

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

#30228C

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#30228C

RGB

rgb(48, 34, 140)

HSL

hsl(248, 61%, 34%)

HSB

hsb(248, 76%, 55%)

CMYK

cmyk(66%, 76%, 0%, 45%)

Oklch

oklch(34.9% 0.165 279.5)

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

#4305FC

Deep Indigo · Blue · Navy Blue

HEX

#4305FC

RGB

rgb(67, 5, 252)

HSL

hsl(255, 98%, 50%)

HSB

hsb(255, 98%, 99%)

CMYK

cmyk(73%, 98%, 0%, 1%)

Oklch

oklch(47.4% 0.296 274.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4A427A

727B42

Analogous

42567B

4A427A

67427B

Triadic

4A427A

7B4B42

427B4B

Split-Comp.

4A427A

7B6742

567B42

Tetradic

4A427A

7B4256

727B42

427B67

Contrast Matrix WCAG 2.1 Contrast

4A427A	5B3982	4B2A96	30228C	4305FC
—	1.0 Fail	1.1 Fail	1.4 Fail	1.1 Fail
1.0 Fail	—	1.1 Fail	1.4 Fail	1.1 Fail
1.1 Fail	1.1 Fail	—	1.2 Fail	1.3 Fail
1.4 Fail	1.4 Fail	1.2 Fail	—	1.5 Fail
1.1 Fail	1.1 Fail	1.3 Fail	1.5 Fail	—

White BG

8.9AAA

10.1AAA

12.1AAA

7.9AAA

Black BG

2.4Fail

2.1Fail

1.7Fail

2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

47466C

4C4C70

3D3C7C

2A2A72

2828C0

Deuteranopia

474869

4E516C

3F4176

2B2C6C

2C30B2

Tritanopia

4A625F

59625F

496763

2F5E5A

409187

Achromatopsia

4B4B4B

404040

323232

343434

Shades & Tints Shades & Tints

#4A427A

Dark

Light

#5B3982

Dark

Light

#4B2A96

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4a427a;
  --color-2: #5b3982;
  --color-3: #4b2a96;
  --color-4: #30228c;
  --color-5: #4305fc;
}

SCSS

$color-1: #4a427a;
$color-2: #5b3982;
$color-3: #4b2a96;
$color-4: #30228c;
$color-5: #4305fc;

TAILWIND

colors: {
  'brand-1': '#4a427a',
  'brand-2': '#5b3982',
  'brand-3': '#4b2a96',
  'brand-4': '#30228c',
  'brand-5': '#4305fc',
}

RGB Array

[74, 66, 122], [91, 57, 130], [75, 42, 150], [48, 34, 140], [67, 5, 252]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4A427A, #5B3982, #4B2A96, #30228C, #4305FC 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: #4a427a; --color-2: #5b3982; --color-3: #4b2a96; --color-4: #30228c; --color-5: #4305fc. 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