#21292C + #8C114A + #8F2357 + #483842 + #3F434E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#21292C

Slate Blue · DarkSlateGray · Peacock Green

HEX

#21292C

RGB

rgb(33, 41, 44)

HSL

hsl(196, 14%, 15%)

HSB

hsb(196, 25%, 17%)

CMYK

cmyk(25%, 7%, 0%, 83%)

Oklch

oklch(27.4% 0.013 222.5)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#8C114A

Dark Violet · Brown · Camellia

HEX

#8C114A

RGB

rgb(140, 17, 74)

HSL

hsl(332, 78%, 31%)

HSB

hsb(332, 88%, 55%)

CMYK

cmyk(0%, 88%, 47%, 45%)

Oklch

oklch(42.2% 0.160 0.1)

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

#8F2357

Dark Violet · Brown · Camellia

HEX

#8F2357

RGB

rgb(143, 35, 87)

HSL

hsl(331, 61%, 35%)

HSB

hsb(331, 76%, 56%)

CMYK

cmyk(0%, 76%, 39%, 44%)

Oklch

oklch(44.6% 0.150 355.8)

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

#483842

Rose Purple · DarkSlateGray · Raspberry

HEX

#483842

RGB

rgb(72, 56, 66)

HSL

hsl(323, 13%, 25%)

HSB

hsb(323, 22%, 28%)

CMYK

cmyk(0%, 22%, 8%, 72%)

Oklch

oklch(36.2% 0.028 340.7)

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

#3F434E

Indigo · DarkSlateGray · Prussian Blue

HEX

#3F434E

RGB

rgb(63, 67, 78)

HSL

hsl(224, 11%, 28%)

HSB

hsb(224, 19%, 31%)

CMYK

cmyk(19%, 14%, 0%, 69%)

Oklch

oklch(38.3% 0.019 269.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

21292C

2C2421

Analogous

212C29

21292C

21232C

Triadic

21292C

2C2129

292C21

Split-Comp.

21292C

2C2123

2C2921

Tetradic

21292C

29212C

2C2421

232C21

Contrast Matrix WCAG 2.1 Contrast

21292C	8C114A	8F2357	483842	3F434E
—	1.6 Fail	1.8 Fail	1.4 Fail	1.5 Fail
1.6 Fail	—	1.1 Fail	1.2 Fail	1.1 Fail
1.8 Fail	1.1 Fail	—	1.3 Fail	1.2 Fail
1.4 Fail	1.2 Fail	1.3 Fail	—	1.1 Fail
1.5 Fail	1.1 Fail	1.2 Fail	1.1 Fail	—

White BG

14.8AAA

9.2AAA

8.2AAA

10.9AAA

9.9AAA

Black BG

1.4Fail

2.3Fail

2.5Fail

1.9Fail

2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

24252B

57563C

605F4A

414140

41414B

Deuteranopia

24232B

5E6739

676F47

42433F

41404B

Tritanopia

212B2B

86312F

8A403E

473E3D

3F4949

Achromatopsia

272727

3C3C3C

494949

3E3E3E

434343

Shades & Tints Shades & Tints

#21292C

Dark

Light

#8C114A

Dark

Light

#8F2357

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #21292c;
  --color-2: #8c114a;
  --color-3: #8f2357;
  --color-4: #483842;
  --color-5: #3f434e;
}

SCSS

$color-1: #21292c;
$color-2: #8c114a;
$color-3: #8f2357;
$color-4: #483842;
$color-5: #3f434e;

TAILWIND

colors: {
  'brand-1': '#21292c',
  'brand-2': '#8c114a',
  'brand-3': '#8f2357',
  'brand-4': '#483842',
  'brand-5': '#3f434e',
}

RGB Array

[33, 41, 44], [140, 17, 74], [143, 35, 87], [72, 56, 66], [63, 67, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #21292C, #8C114A, #8F2357, #483842, #3F434E 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: #21292c; --color-2: #8c114a; --color-3: #8f2357; --color-4: #483842; --color-5: #3f434e. 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