#180E2B + #32173D + #52223F + #70313E + #8F583C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#180E2B

Deep Indigo · Black · Dark Purple

HEX

#180E2B

RGB

rgb(24, 14, 43)

HSL

hsl(261, 51%, 11%)

HSB

hsb(261, 67%, 17%)

CMYK

cmyk(44%, 67%, 0%, 83%)

Oklch

oklch(19.5% 0.057 296.7)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#32173D

Dark Plum · MidnightBlue · Dark Purple

HEX

#32173D

RGB

rgb(50, 23, 61)

HSL

hsl(283, 45%, 16%)

HSB

hsb(283, 62%, 24%)

CMYK

cmyk(18%, 62%, 0%, 76%)

Oklch

oklch(26.2% 0.075 315.2)

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

#52223F

Rose Purple · DarkSlateGray · Raspberry

HEX

#52223F

RGB

rgb(82, 34, 63)

HSL

hsl(324, 41%, 23%)

HSB

hsb(324, 59%, 32%)

CMYK

cmyk(0%, 59%, 23%, 68%)

Oklch

oklch(33.1% 0.082 345.2)

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

#70313E

Crimson · Brown · Wine Red

HEX

#70313E

RGB

rgb(112, 49, 62)

HSL

hsl(348, 39%, 32%)

HSB

hsb(348, 56%, 44%)

CMYK

cmyk(0%, 56%, 45%, 56%)

Oklch

oklch(40.3% 0.090 9.1)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#8F583C

Tangerine · Sienna · Amber Brown

HEX

#8F583C

RGB

rgb(143, 88, 60)

HSL

hsl(20, 41%, 40%)

HSB

hsb(20, 58%, 56%)

CMYK

cmyk(0%, 38%, 58%, 44%)

Oklch

oklch(51.6% 0.084 47.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

180E2B

202A0E

Analogous

0E122A

180E2B

260E2A

Triadic

180E2B

2A180E

0E2A18

Split-Comp.

180E2B

2A260E

122A0E

Tetradic

180E2B

2A0E12

202A0E

0E2A26

Contrast Matrix WCAG 2.1 Contrast

180E2B	32173D	52223F	70313E	8F583C
—	1.2 Fail	1.5 Fail	1.9 Fail	3.2 AA Large
1.2 Fail	—	1.3 Fail	1.7 Fail	2.7 Fail
1.5 Fail	1.3 Fail	—	1.3 Fail	2.2 Fail
1.9 Fail	1.7 Fail	1.3 Fail	—	1.7 Fail
3.2 AA Large	2.7 Fail	2.2 Fail	1.7 Fail	—

White BG

18.5AAA

15.8AAA

12.7AAA

9.6AAA

5.8AA

Black BG

1.1Fail

1.3Fail

1.7Fail

2.2Fail

3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

141424

262634

3D3D38

55543B

777743

Deuteranopia

141522

282A32

404436

585D3A

7A7F44

Tritanopia

171E1D

312D2B

503231

6D3838

8C4849

Achromatopsia

141414

232323

343434

454545

656565

Shades & Tints Shades & Tints

#180E2B

Dark

Light

#32173D

Dark

Light

#52223F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #180e2b;
  --color-2: #32173d;
  --color-3: #52223f;
  --color-4: #70313e;
  --color-5: #8f583c;
}

SCSS

$color-1: #180e2b;
$color-2: #32173d;
$color-3: #52223f;
$color-4: #70313e;
$color-5: #8f583c;

TAILWIND

colors: {
  'brand-1': '#180e2b',
  'brand-2': '#32173d',
  'brand-3': '#52223f',
  'brand-4': '#70313e',
  'brand-5': '#8f583c',
}

RGB Array

[24, 14, 43], [50, 23, 61], [82, 34, 63], [112, 49, 62], [143, 88, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #180E2B, #32173D, #52223F, #70313E, #8F583C 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: #180e2b; --color-2: #32173d; --color-3: #52223f; --color-4: #70313e; --color-5: #8f583c. 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