#2C28DF + #352BBB + #3F2E98 + #483074 + #513350 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2C28DF

Deep Indigo · MediumBlue · Navy Blue

HEX

#2C28DF

RGB

rgb(44, 40, 223)

HSL

hsl(241, 74%, 52%)

HSB

hsb(241, 82%, 87%)

CMYK

cmyk(80%, 82%, 0%, 13%)

Oklch

oklch(44.6% 0.258 270.2)

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

#352BBB

Deep Indigo · DarkSlateBlue · Navy Blue

HEX

#352BBB

RGB

rgb(53, 43, 187)

HSL

hsl(244, 63%, 45%)

HSB

hsb(244, 77%, 73%)

CMYK

cmyk(72%, 77%, 0%, 27%)

Oklch

oklch(41.5% 0.212 274.9)

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

#3F2E98

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#3F2E98

RGB

rgb(63, 46, 152)

HSL

hsl(250, 54%, 39%)

HSB

hsb(250, 70%, 60%)

CMYK

cmyk(59%, 70%, 0%, 40%)

Oklch

oklch(39.1% 0.164 283.1)

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

#483074

Deep Indigo · DarkSlateBlue · Eggplant

HEX

#483074

RGB

rgb(72, 48, 116)

HSL

hsl(261, 41%, 32%)

HSB

hsb(261, 59%, 45%)

CMYK

cmyk(38%, 59%, 0%, 55%)

Oklch

oklch(37.4% 0.113 296.9)

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

#513350

Rose Purple · DarkSlateGray · Eggplant

HEX

#513350

RGB

rgb(81, 51, 80)

HSL

hsl(302, 23%, 26%)

HSB

hsb(302, 37%, 32%)

CMYK

cmyk(0%, 37%, 1%, 68%)

Oklch

oklch(36.8% 0.062 327.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C28DF

DCDF2A

Analogous

2A82DF

2C28DF

882ADF

Triadic

2C28DF

DF2D2A

2ADF2D

Split-Comp.

2C28DF

DF882A

82DF2A

Tetradic

2C28DF

DF2A82

DCDF2A

2ADF88

Contrast Matrix WCAG 2.1 Contrast

2C28DF	352BBB	3F2E98	483074	513350
—	1.1 Fail	1.2 Fail	1.3 Fail	1.3 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.3 Fail	1.1 Fail	1.1 Fail	—	1.0 Fail
1.3 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

8.5AAA

9.5AAA

10.2AAA

10.8AAA

Black BG

2.5Fail

2.2Fail

2.1Fail

2.0Fail

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2AB3

313198

38377E

3E3D64

444449

Deuteranopia

2B2BA8

313290

393A78

3F4160

464847

Tritanopia

2C9088

347D77

3E6A66

475754

504342

Achromatopsia

3E3E3E

3F3F3F

Shades & Tints Shades & Tints

#2C28DF

Dark

Light

#352BBB

Dark

Light

#3F2E98

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c28df;
  --color-2: #352bbb;
  --color-3: #3f2e98;
  --color-4: #483074;
  --color-5: #513350;
}

SCSS

$color-1: #2c28df;
$color-2: #352bbb;
$color-3: #3f2e98;
$color-4: #483074;
$color-5: #513350;

TAILWIND

colors: {
  'brand-1': '#2c28df',
  'brand-2': '#352bbb',
  'brand-3': '#3f2e98',
  'brand-4': '#483074',
  'brand-5': '#513350',
}

RGB Array

[44, 40, 223], [53, 43, 187], [63, 46, 152], [72, 48, 116], [81, 51, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C28DF, #352BBB, #3F2E98, #483074, #513350 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: #2c28df; --color-2: #352bbb; --color-3: #3f2e98; --color-4: #483074; --color-5: #513350. 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