#8E324C + #563750 + #3E3951 + #A14B4A + #CC5247 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8E324C

Dark Violet · Brown · Camellia

HEX

#8E324C

RGB

rgb(142, 50, 76)

HSL

hsl(343, 48%, 38%)

HSB

hsb(343, 65%, 56%)

CMYK

cmyk(0%, 65%, 46%, 44%)

Oklch

oklch(45.7% 0.126 6.2)

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

#563750

Rose Purple · DarkSlateGray · Eggplant

HEX

#563750

RGB

rgb(86, 55, 80)

HSL

hsl(312, 22%, 28%)

HSB

hsb(312, 36%, 34%)

CMYK

cmyk(0%, 36%, 7%, 66%)

Oklch

oklch(38.3% 0.058 333.8)

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

#3E3951

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#3E3951

RGB

rgb(62, 57, 81)

HSL

hsl(252, 17%, 27%)

HSB

hsb(252, 30%, 32%)

CMYK

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

Oklch

oklch(36.0% 0.041 293.8)

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

#A14B4A

Crimson · Sienna · Passion Red

HEX

#A14B4A

RGB

rgb(161, 75, 74)

HSL

hsl(1, 37%, 46%)

HSB

hsb(1, 54%, 63%)

CMYK

cmyk(0%, 53%, 54%, 37%)

Oklch

oklch(52.2% 0.115 22.5)

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

#CC5247

Crimson · Chocolate · Passion Red

HEX

#CC5247

RGB

rgb(204, 82, 71)

HSL

hsl(5, 57%, 54%)

HSB

hsb(5, 65%, 80%)

CMYK

cmyk(0%, 60%, 65%, 20%)

Oklch

oklch(59.6% 0.157 27.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8E324C

328F75

Analogous

8F327B

8E324C

8F4732

Triadic

8E324C

4D8F32

324D8F

Split-Comp.

8E324C

328F47

327B8F

Tetradic

8E324C

7B8F32

328F75

47328F

Contrast Matrix WCAG 2.1 Contrast

8E324C	563750	3E3951	A14B4A	CC5247
—	1.3 Fail	1.4 Fail	1.3 Fail	1.8 Fail
1.3 Fail	—	1.1 Fail	1.8 Fail	2.4 Fail
1.4 Fail	1.1 Fail	—	1.9 Fail	2.5 Fail
1.3 Fail	1.8 Fail	1.9 Fail	—	1.3 Fail
1.8 Fail	2.4 Fail	2.5 Fail	1.3 Fail	—

White BG

7.7AAA

10.2AAA

11.0AAA

5.8AA

4.3AA Large

Black BG

2.7Fail

2.1Fail

1.9Fail

3.6AA Large

4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

666546

49484A

3C3C4B

7C7B4A

97964A

Deuteranopia

6C7244

4A4D49

3C3D4A

81874A

9EA74A

Tritanopia

894140

544544

3E4746

9D4A4A

C64C4C

Achromatopsia

505050

434343

3D3D3D

656565

757575

Shades & Tints Shades & Tints

#8E324C

Dark

Light

#563750

Dark

Light

#3E3951

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8e324c;
  --color-2: #563750;
  --color-3: #3e3951;
  --color-4: #a14b4a;
  --color-5: #cc5247;
}

SCSS

$color-1: #8e324c;
$color-2: #563750;
$color-3: #3e3951;
$color-4: #a14b4a;
$color-5: #cc5247;

TAILWIND

colors: {
  'brand-1': '#8e324c',
  'brand-2': '#563750',
  'brand-3': '#3e3951',
  'brand-4': '#a14b4a',
  'brand-5': '#cc5247',
}

RGB Array

[142, 50, 76], [86, 55, 80], [62, 57, 81], [161, 75, 74], [204, 82, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8E324C, #563750, #3E3951, #A14B4A, #CC5247 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: #8e324c; --color-2: #563750; --color-3: #3e3951; --color-4: #a14b4a; --color-5: #cc5247. 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