#142C57 + #232A47 + #322837 + #412627 + #502617 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#142C57

Indigo · MidnightBlue · Prussian Blue

HEX

#142C57

RGB

rgb(20, 44, 87)

HSL

hsl(219, 63%, 21%)

HSB

hsb(219, 77%, 34%)

CMYK

cmyk(77%, 49%, 0%, 66%)

Oklch

oklch(30.0% 0.083 261.0)

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

#232A47

Indigo · DarkSlateGray · Prussian Blue

HEX

#232A47

RGB

rgb(35, 42, 71)

HSL

hsl(228, 34%, 21%)

HSB

hsb(228, 51%, 28%)

CMYK

cmyk(51%, 41%, 0%, 72%)

Oklch

oklch(29.3% 0.054 272.4)

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

#322837

Dark Plum · DarkSlateGray · Dark Purple

HEX

#322837

RGB

rgb(50, 40, 55)

HSL

hsl(280, 16%, 19%)

HSB

hsb(280, 27%, 22%)

CMYK

cmyk(9%, 27%, 0%, 78%)

Oklch

oklch(29.4% 0.030 314.3)

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

#412627

Crimson · DarkSlateGray · Deep Berry

HEX

#412627

RGB

rgb(65, 38, 39)

HSL

hsl(358, 26%, 20%)

HSB

hsb(358, 42%, 25%)

CMYK

cmyk(0%, 42%, 40%, 75%)

Oklch

oklch(30.3% 0.041 17.4)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#502617

Tangerine · Maroon · Cinnamon

HEX

#502617

RGB

rgb(80, 38, 23)

HSL

hsl(16, 55%, 20%)

HSB

hsb(16, 71%, 31%)

CMYK

cmyk(0%, 52%, 71%, 69%)

Oklch

oklch(32.3% 0.068 40.0)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

142C57

574014

Analogous

144D57

142C57

1E1457

Triadic

142C57

57142B

2B5714

Split-Comp.

142C57

571E14

4D5714

Tetradic

142C57

57144D

574014

14571E

Contrast Matrix WCAG 2.1 Contrast

142C57	232A47	322837	412627	502617
—	1.0 Fail	1.0 Fail	1.0 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.1 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.1 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.1 Fail	—

White BG

13.7AAA

14.1AAA

13.7AAA

12.9AAA

Black BG

1.5Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

1E1F4D

262640

2E2E33

353527

3E3D1B

Deuteranopia

1D1B4A

26253E

2E2F33

373927

40431C

Tritanopia

154443

233A39

323130

402727

4E1D1E

Achromatopsia

2A2A2A

2B2B2B

2D2D2D

2E2E2E

313131

Shades & Tints Shades & Tints

#142C57

Dark

Light

#232A47

Dark

Light

#322837

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #142c57;
  --color-2: #232a47;
  --color-3: #322837;
  --color-4: #412627;
  --color-5: #502617;
}

SCSS

$color-1: #142c57;
$color-2: #232a47;
$color-3: #322837;
$color-4: #412627;
$color-5: #502617;

TAILWIND

colors: {
  'brand-1': '#142c57',
  'brand-2': '#232a47',
  'brand-3': '#322837',
  'brand-4': '#412627',
  'brand-5': '#502617',
}

RGB Array

[20, 44, 87], [35, 42, 71], [50, 40, 55], [65, 38, 39], [80, 38, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #142C57, #232A47, #322837, #412627, #502617 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: #142c57; --color-2: #232a47; --color-3: #322837; --color-4: #412627; --color-5: #502617. 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