#5F5762 + #7945AD + #4E4359 + #710FD4 + #3E3447 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5F5762

Ink Gray · DimGray · Charcoal

HEX

#5F5762

RGB

rgb(95, 87, 98)

HSL

hsl(284, 6%, 36%)

HSB

hsb(284, 11%, 38%)

CMYK

cmyk(3%, 11%, 0%, 62%)

Oklch

oklch(46.8% 0.020 316.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#7945AD

Dark Plum · SlateBlue · Violet

HEX

#7945AD

RGB

rgb(121, 69, 173)

HSL

hsl(270, 43%, 47%)

HSB

hsb(270, 60%, 68%)

CMYK

cmyk(30%, 60%, 0%, 32%)

Oklch

oklch(50.2% 0.162 304.2)

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

#4E4359

Dark Plum · DarkSlateGray · Eggplant

HEX

#4E4359

RGB

rgb(78, 67, 89)

HSL

hsl(270, 14%, 31%)

HSB

hsb(270, 25%, 35%)

CMYK

cmyk(12%, 25%, 0%, 65%)

Oklch

oklch(40.3% 0.039 307.4)

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

#710FD4

Royal Purple · DarkViolet · Violet

HEX

#710FD4

RGB

rgb(113, 15, 212)

HSL

hsl(270, 87%, 45%)

HSB

hsb(270, 93%, 83%)

CMYK

cmyk(47%, 93%, 0%, 17%)

Oklch

oklch(47.5% 0.251 296.5)

Traditional「Royal Purple」· Paint「Violet」· Creative Blush Sunrise

#3E3447

Dark Plum · DarkSlateGray · Eggplant

HEX

#3E3447

RGB

rgb(62, 52, 71)

HSL

hsl(272, 15%, 24%)

HSB

hsb(272, 27%, 28%)

CMYK

cmyk(13%, 27%, 0%, 72%)

Oklch

oklch(34.4% 0.035 308.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F5762

596156

Analogous

595661

5F5762

61565F

Triadic

5F5762

615E56

56615E

Split-Comp.

5F5762

5F6156

566159

Tetradic

5F5762

615956

596156

565F61

Contrast Matrix WCAG 2.1 Contrast

5F5762	7945AD	4E4359	710FD4	3E3447
—	1.1 Fail	1.3 Fail	1.1 Fail	1.7 Fail
1.1 Fail	—	1.4 Fail	1.2 Fail	1.8 Fail
1.3 Fail	1.4 Fail	—	1.2 Fail	1.3 Fail
1.1 Fail	1.2 Fail	1.2 Fail	—	1.5 Fail
1.7 Fail	1.8 Fail	1.3 Fail	1.5 Fail	—

White BG

6.9AA

6.4AA

9.2AAA

7.7AAA

11.8AAA

Black BG

3.0AA Large

3.3AA Large

2.3Fail

2.7Fail

1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5B5F

626294

494954

4746A4

3A3A42

Deuteranopia

5C5D5F

66698E

4A4B52

4C5499

3A3B41

Tritanopia

5F5D5D

76807C

4D4F4F

6C7F76

3E3F3E

Achromatopsia

5B5B5B

606060

494949

434343

393939

Shades & Tints Shades & Tints

#5F5762

Dark

Light

#7945AD

Dark

Light

#4E4359

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f5762;
  --color-2: #7945ad;
  --color-3: #4e4359;
  --color-4: #710fd4;
  --color-5: #3e3447;
}

SCSS

$color-1: #5f5762;
$color-2: #7945ad;
$color-3: #4e4359;
$color-4: #710fd4;
$color-5: #3e3447;

TAILWIND

colors: {
  'brand-1': '#5f5762',
  'brand-2': '#7945ad',
  'brand-3': '#4e4359',
  'brand-4': '#710fd4',
  'brand-5': '#3e3447',
}

RGB Array

[95, 87, 98], [121, 69, 173], [78, 67, 89], [113, 15, 212], [62, 52, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F5762, #7945AD, #4E4359, #710FD4, #3E3447 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: #5f5762; --color-2: #7945ad; --color-3: #4e4359; --color-4: #710fd4; --color-5: #3e3447. 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