#120214 + #30121C + #422640 + #453E5D + #4A6A8D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#120214

Royal Purple · Black · Dark Purple

HEX

#120214

RGB

rgb(18, 2, 20)

HSL

hsl(293, 82%, 4%)

HSB

hsb(293, 90%, 8%)

CMYK

cmyk(10%, 90%, 0%, 92%)

Oklch

oklch(13.7% 0.051 323.9)

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

#30121C

Dark Violet · Black · Raspberry

HEX

#30121C

RGB

rgb(48, 18, 28)

HSL

hsl(340, 45%, 13%)

HSB

hsb(340, 63%, 19%)

CMYK

cmyk(0%, 63%, 42%, 81%)

Oklch

oklch(23.2% 0.051 0.7)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#422640

Rose Purple · DarkSlateGray · Dark Purple

HEX

#422640

RGB

rgb(66, 38, 64)

HSL

hsl(304, 27%, 20%)

HSB

hsb(304, 42%, 26%)

CMYK

cmyk(0%, 42%, 3%, 74%)

Oklch

oklch(31.5% 0.059 329.4)

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

#453E5D

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#453E5D

RGB

rgb(69, 62, 93)

HSL

hsl(254, 20%, 30%)

HSB

hsb(254, 33%, 36%)

CMYK

cmyk(26%, 33%, 0%, 64%)

Oklch

oklch(38.4% 0.053 294.2)

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

#4A6A8D

Indigo · SlateGray · Navy Blue

HEX

#4A6A8D

RGB

rgb(74, 106, 141)

HSL

hsl(211, 31%, 42%)

HSB

hsb(211, 48%, 55%)

CMYK

cmyk(48%, 25%, 0%, 45%)

Oklch

oklch(51.4% 0.067 251.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

120214

041302

Analogous

080213

120214

13020C

Triadic

120214

131102

021311

Split-Comp.

120214

0C1302

021308

Tetradic

120214

130802

041302

020C13

Contrast Matrix WCAG 2.1 Contrast

120214	30121C	422640	453E5D	4A6A8D
—	1.2 Fail	1.5 Fail	2.0 Fail	3.6 AA Large
1.2 Fail	—	1.3 Fail	1.7 Fail	3.0 AA Large
1.5 Fail	1.3 Fail	—	1.3 Fail	2.4 Fail
2.0 Fail	1.7 Fail	1.3 Fail	—	1.8 Fail
3.6 AA Large	3.0 AA Large	2.4 Fail	1.8 Fail	—

White BG

20.1AAA

17.1AAA

13.3AAA

10.0AAA

5.6AA

Black BG

1.0Fail

1.2Fail

1.6Fail

2.1Fail

3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

0B0B10

23231A

36363A

424255

585885

Deuteranopia

0C0D0F

252719

383A38

424354

565483

Tritanopia

110C0B

2E1817

413534

45504E

4C7E7C

Achromatopsia

090909

1C1C1C

313131

444444

646464

Shades & Tints Shades & Tints

#120214

Dark

Light

#30121C

Dark

Light

#422640

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #120214;
  --color-2: #30121c;
  --color-3: #422640;
  --color-4: #453e5d;
  --color-5: #4a6a8d;
}

SCSS

$color-1: #120214;
$color-2: #30121c;
$color-3: #422640;
$color-4: #453e5d;
$color-5: #4a6a8d;

TAILWIND

colors: {
  'brand-1': '#120214',
  'brand-2': '#30121c',
  'brand-3': '#422640',
  'brand-4': '#453e5d',
  'brand-5': '#4a6a8d',
}

RGB Array

[18, 2, 20], [48, 18, 28], [66, 38, 64], [69, 62, 93], [74, 106, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #120214, #30121C, #422640, #453E5D, #4A6A8D 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: #120214; --color-2: #30121c; --color-3: #422640; --color-4: #453e5d; --color-5: #4a6a8d. 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