#223356 + #2E3151 + #3A2E4B + #462C46 + #522940 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#223356

Indigo · DarkSlateGray · Prussian Blue

HEX

#223356

RGB

rgb(34, 51, 86)

HSL

hsl(220, 43%, 24%)

HSB

hsb(220, 60%, 34%)

CMYK

cmyk(60%, 41%, 0%, 66%)

Oklch

oklch(32.5% 0.066 263.5)

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

#2E3151

Indigo · DarkSlateGray · Prussian Blue

HEX

#2E3151

RGB

rgb(46, 49, 81)

HSL

hsl(235, 28%, 25%)

HSB

hsb(235, 43%, 32%)

CMYK

cmyk(43%, 40%, 0%, 68%)

Oklch

oklch(32.6% 0.057 278.7)

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

#3A2E4B

Deep Indigo · DarkSlateGray · Eggplant

HEX

#3A2E4B

RGB

rgb(58, 46, 75)

HSL

hsl(265, 24%, 24%)

HSB

hsb(265, 39%, 29%)

CMYK

cmyk(23%, 39%, 0%, 71%)

Oklch

oklch(32.8% 0.052 302.6)

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

#462C46

Rose Purple · DarkSlateGray · Eggplant

HEX

#462C46

RGB

rgb(70, 44, 70)

HSL

hsl(300, 23%, 22%)

HSB

hsb(300, 37%, 27%)

CMYK

cmyk(0%, 37%, 0%, 73%)

Oklch

oklch(33.5% 0.056 326.7)

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

#522940

Rose Purple · DarkSlateGray · Raspberry

HEX

#522940

RGB

rgb(82, 41, 64)

HSL

hsl(326, 33%, 24%)

HSB

hsb(326, 50%, 32%)

CMYK

cmyk(0%, 50%, 22%, 68%)

Oklch

oklch(34.4% 0.069 346.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

223356

584623

Analogous

234F58

223356

2C2358

Triadic

223356

582334

345823

Split-Comp.

223356

582C23

4F5823

Tetradic

223356

58234F

584623

23582C

Contrast Matrix WCAG 2.1 Contrast

223356	2E3151	3A2E4B	462C46	522940
—	1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail	—

White BG

12.5AAA

12.6AAA

12.3AAA

12.0AAA

Black BG

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

292A4E

2F2F49

353544

3B3B40

40403A

Deuteranopia

28274C

2F2F47

363642

3C3E3E

434639

Tritanopia

234745

2E4342

393E3D

453B3A

503635

Achromatopsia

323232

343434

353535

373737

383838

Shades & Tints Shades & Tints

#223356

Dark

Light

#2E3151

Dark

Light

#3A2E4B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #223356;
  --color-2: #2e3151;
  --color-3: #3a2e4b;
  --color-4: #462c46;
  --color-5: #522940;
}

SCSS

$color-1: #223356;
$color-2: #2e3151;
$color-3: #3a2e4b;
$color-4: #462c46;
$color-5: #522940;

TAILWIND

colors: {
  'brand-1': '#223356',
  'brand-2': '#2e3151',
  'brand-3': '#3a2e4b',
  'brand-4': '#462c46',
  'brand-5': '#522940',
}

RGB Array

[34, 51, 86], [46, 49, 81], [58, 46, 75], [70, 44, 70], [82, 41, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #223356, #2E3151, #3A2E4B, #462C46, #522940 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: #223356; --color-2: #2e3151; --color-3: #3a2e4b; --color-4: #462c46; --color-5: #522940. 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