#14112C + #20214F + #5E215D + #922082 + #C02782 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#14112C

Deep Indigo · Black · Deep Sea Blue

HEX

#14112C

RGB

rgb(20, 17, 44)

HSL

hsl(247, 44%, 12%)

HSB

hsb(247, 61%, 17%)

CMYK

cmyk(55%, 61%, 0%, 83%)

Oklch

oklch(19.8% 0.053 285.6)

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

#20214F

Indigo · MidnightBlue · Prussian Blue

HEX

#20214F

RGB

rgb(32, 33, 79)

HSL

hsl(239, 42%, 22%)

HSB

hsb(239, 59%, 31%)

CMYK

cmyk(59%, 58%, 0%, 69%)

Oklch

oklch(27.5% 0.083 278.6)

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

#5E215D

Rose Purple · DarkSlateBlue · Eggplant

HEX

#5E215D

RGB

rgb(94, 33, 93)

HSL

hsl(301, 48%, 25%)

HSB

hsb(301, 65%, 37%)

CMYK

cmyk(0%, 65%, 1%, 63%)

Oklch

oklch(36.5% 0.119 328.3)

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

#922082

Rose Purple · DarkMagenta · Eggplant

HEX

#922082

RGB

rgb(146, 32, 130)

HSL

hsl(308, 64%, 35%)

HSB

hsb(308, 78%, 57%)

CMYK

cmyk(0%, 78%, 11%, 43%)

Oklch

oklch(46.8% 0.182 334.6)

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

#C02782

Rose Purple · MediumVioletRed · Camellia

HEX

#C02782

RGB

rgb(192, 39, 130)

HSL

hsl(324, 66%, 45%)

HSB

hsb(324, 80%, 75%)

CMYK

cmyk(0%, 80%, 32%, 25%)

Oklch

oklch(55.0% 0.203 349.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

14112C

292C11

Analogous

111B2C

14112C

22112C

Triadic

14112C

2C1411

112C14

Split-Comp.

14112C

2C2211

1B2C11

Tetradic

14112C

2C111B

292C11

112C22

Contrast Matrix WCAG 2.1 Contrast

14112C	20214F	5E215D	922082	C02782
—	1.2 Fail	1.6 Fail	2.4 Fail	3.4 AA Large
1.2 Fail	—	1.3 Fail	2.0 Fail	2.8 Fail
1.6 Fail	1.3 Fail	—	1.5 Fail	2.1 Fail
2.4 Fail	2.0 Fail	1.5 Fail	—	1.4 Fail
3.4 AA Large	2.8 Fail	2.1 Fail	1.4 Fail	—

White BG

18.3AAA

15.1AAA

11.3AAA

7.6AAA

5.4AA

Black BG

1.1Fail

1.4Fail

1.9Fail

2.8Fail

3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

131325

202044

44434E

61606A

7E7C6C

Deuteranopia

131324

202041

474C4B

677065

879267

Tritanopia

14201F

203B39

5B4341

8C5853

B85B57

Achromatopsia

151515

262626

3A3A3A

4D4D4D

5F5F5F

Shades & Tints Shades & Tints

#14112C

Dark

Light

#20214F

Dark

Light

#5E215D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #14112c;
  --color-2: #20214f;
  --color-3: #5e215d;
  --color-4: #922082;
  --color-5: #c02782;
}

SCSS

$color-1: #14112c;
$color-2: #20214f;
$color-3: #5e215d;
$color-4: #922082;
$color-5: #c02782;

TAILWIND

colors: {
  'brand-1': '#14112c',
  'brand-2': '#20214f',
  'brand-3': '#5e215d',
  'brand-4': '#922082',
  'brand-5': '#c02782',
}

RGB Array

[20, 17, 44], [32, 33, 79], [94, 33, 93], [146, 32, 130], [192, 39, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #14112C, #20214F, #5E215D, #922082, #C02782 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: #14112c; --color-2: #20214f; --color-3: #5e215d; --color-4: #922082; --color-5: #c02782. 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