#22243C + #180425 + #310456 + #190841 + #1F1D2A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#22243C

Indigo · DarkSlateGray · Deep Sea Blue

HEX

#22243C

RGB

rgb(34, 36, 60)

HSL

hsl(235, 28%, 18%)

HSB

hsb(235, 43%, 24%)

CMYK

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

Oklch

oklch(27.1% 0.045 279.3)

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

#180425

Royal Purple · Black · Dark Purple

HEX

#180425

RGB

rgb(24, 4, 37)

HSL

hsl(276, 80%, 8%)

HSB

hsb(276, 89%, 15%)

CMYK

cmyk(35%, 89%, 0%, 85%)

Oklch

oklch(16.9% 0.069 309.4)

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

#310456

Royal Purple · MidnightBlue · Dark Purple

HEX

#310456

RGB

rgb(49, 4, 86)

HSL

hsl(273, 91%, 18%)

HSB

hsb(273, 95%, 34%)

CMYK

cmyk(43%, 95%, 0%, 66%)

Oklch

oklch(25.9% 0.130 302.0)

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

#190841

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX

#190841

RGB

rgb(25, 8, 65)

HSL

hsl(258, 78%, 14%)

HSB

hsb(258, 88%, 25%)

CMYK

cmyk(62%, 88%, 0%, 75%)

Oklch

oklch(20.8% 0.099 288.2)

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

#1F1D2A

Deep Indigo · Black · Deep Sea Blue

HEX

#1F1D2A

RGB

rgb(31, 29, 42)

HSL

hsl(249, 18%, 14%)

HSB

hsb(249, 31%, 16%)

CMYK

cmyk(26%, 31%, 0%, 84%)

Oklch

oklch(23.9% 0.025 291.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

22243C

3B3921

Analogous

21303B

22243C

2C213B

Triadic

22243C

3B2123

233B21

Split-Comp.

22243C

3B2C21

303B21

Tetradic

22243C

3B2130

3B3921

213B2C

Contrast Matrix WCAG 2.1 Contrast

22243C	180425	310456	190841	1F1D2A
—	1.3 Fail	1.1 Fail	1.2 Fail	1.1 Fail
1.3 Fail	—	1.2 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.2 Fail	—	1.1 Fail	1.0 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.1 Fail	1.2 Fail	1.0 Fail	1.1 Fail	—

White BG

15.2AAA

19.4AAA

16.4AAA

18.2AAA

16.6AAA

Black BG

1.4Fail

1.1Fail

1.3Fail

1.2Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

232336

0F0F1D

1E1D42

121133

1E1E27

Deuteranopia

232335

11121B

20243D

131430

1E1E26

Tritanopia

223231

171715

2F322F

182826

1F2424

Achromatopsia

262626

0E0E0E

1B1B1B

141414

1F1F1F

Shades & Tints Shades & Tints

#22243C

Dark

Light

#180425

Dark

Light

#310456

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #22243c;
  --color-2: #180425;
  --color-3: #310456;
  --color-4: #190841;
  --color-5: #1f1d2a;
}

SCSS

$color-1: #22243c;
$color-2: #180425;
$color-3: #310456;
$color-4: #190841;
$color-5: #1f1d2a;

TAILWIND

colors: {
  'brand-1': '#22243c',
  'brand-2': '#180425',
  'brand-3': '#310456',
  'brand-4': '#190841',
  'brand-5': '#1f1d2a',
}

RGB Array

[34, 36, 60], [24, 4, 37], [49, 4, 86], [25, 8, 65], [31, 29, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #22243C, #180425, #310456, #190841, #1F1D2A 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: #22243c; --color-2: #180425; --color-3: #310456; --color-4: #190841; --color-5: #1f1d2a. 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