#45323E + #533B63 + #5A4369 + #87396C + #EC173A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#45323E

Rose Purple · DarkSlateGray · Raspberry

HEX

#45323E

RGB

rgb(69, 50, 62)

HSL

hsl(322, 16%, 23%)

HSB

hsb(322, 28%, 27%)

CMYK

cmyk(0%, 28%, 10%, 73%)

Oklch

oklch(34.3% 0.034 340.8)

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

#533B63

Dark Plum · DarkSlateBlue · Eggplant

HEX

#533B63

RGB

rgb(83, 59, 99)

HSL

hsl(276, 25%, 31%)

HSB

hsb(276, 40%, 39%)

CMYK

cmyk(16%, 40%, 0%, 61%)

Oklch

oklch(39.6% 0.072 311.0)

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

#5A4369

Dark Plum · DarkSlateBlue · Eggplant

HEX

#5A4369

RGB

rgb(90, 67, 105)

HSL

hsl(276, 22%, 34%)

HSB

hsb(276, 36%, 41%)

CMYK

cmyk(14%, 36%, 0%, 59%)

Oklch

oklch(42.3% 0.067 311.4)

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

#87396C

Rose Purple · DimGray · Camellia

HEX

#87396C

RGB

rgb(135, 57, 108)

HSL

hsl(321, 41%, 38%)

HSB

hsb(321, 58%, 53%)

CMYK

cmyk(0%, 58%, 20%, 47%)

Oklch

oklch(46.7% 0.124 343.0)

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

#EC173A

Vermilion · Crimson · Passion Red

HEX

#EC173A

RGB

rgb(236, 23, 58)

HSL

hsl(350, 85%, 51%)

HSB

hsb(350, 90%, 93%)

CMYK

cmyk(0%, 90%, 75%, 7%)

Oklch

oklch(60.1% 0.234 22.0)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

45323E

314438

Analogous

423144

45323E

443134

Triadic

45323E

3D4431

313D44

Split-Comp.

45323E

344431

314442

Tetradic

45323E

444231

314438

313444

Contrast Matrix WCAG 2.1 Contrast

45323E	533B63	5A4369	87396C	EC173A
—	1.2 Fail	1.4 Fail	1.6 Fail	2.7 Fail
1.2 Fail	—	1.1 Fail	1.3 Fail	2.2 Fail
1.4 Fail	1.1 Fail	—	1.2 Fail	1.9 Fail
1.6 Fail	1.3 Fail	1.2 Fail	—	1.7 Fail
2.7 Fail	2.2 Fail	1.9 Fail	1.7 Fail	—

White BG

11.8AAA

9.7AAA

8.6AAA

7.4AAA

4.4AA Large

Black BG

1.8Fail

2.2Fail

2.4Fail

2.8Fail

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3D3B

494859

505060

656560

908E32

Deuteranopia

3E3F3A

4A4C57

51535E

6A705D

9CAC2F

Tritanopia

443938

525250

595957

835654

E12B29

Achromatopsia

393939

474747

4E4E4E

565656

5B5B5B

Shades & Tints Shades & Tints

#45323E

Dark

Light

#533B63

Dark

Light

#5A4369

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #45323e;
  --color-2: #533b63;
  --color-3: #5a4369;
  --color-4: #87396c;
  --color-5: #ec173a;
}

SCSS

$color-1: #45323e;
$color-2: #533b63;
$color-3: #5a4369;
$color-4: #87396c;
$color-5: #ec173a;

TAILWIND

colors: {
  'brand-1': '#45323e',
  'brand-2': '#533b63',
  'brand-3': '#5a4369',
  'brand-4': '#87396c',
  'brand-5': '#ec173a',
}

RGB Array

[69, 50, 62], [83, 59, 99], [90, 67, 105], [135, 57, 108], [236, 23, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #45323E, #533B63, #5A4369, #87396C, #EC173A 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: #45323e; --color-2: #533b63; --color-3: #5a4369; --color-4: #87396c; --color-5: #ec173a. 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