#5B4866 + #7A4C87 + #957982 + #B81476 + #2E2322 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5B4866

Dark Plum · DimGray · Eggplant

HEX

#5B4866

RGB

rgb(91, 72, 102)

HSL

hsl(278, 17%, 34%)

HSB

hsb(278, 29%, 40%)

CMYK

cmyk(11%, 29%, 0%, 60%)

Oklch

oklch(43.3% 0.054 312.8)

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

#7A4C87

Dark Plum · DimGray · Violet

HEX

#7A4C87

RGB

rgb(122, 76, 135)

HSL

hsl(287, 28%, 41%)

HSB

hsb(287, 44%, 53%)

CMYK

cmyk(10%, 44%, 0%, 47%)

Oklch

oklch(49.2% 0.105 318.6)

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

#957982

Dark Violet · Gray · Rose Pink

HEX

#957982

RGB

rgb(149, 121, 130)

HSL

hsl(341, 12%, 53%)

HSB

hsb(341, 19%, 58%)

CMYK

cmyk(0%, 19%, 13%, 42%)

Oklch

oklch(60.5% 0.037 357.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#B81476

Rose Purple · MediumVioletRed · Camellia

HEX

#B81476

RGB

rgb(184, 20, 118)

HSL

hsl(324, 80%, 40%)

HSB

hsb(324, 89%, 72%)

CMYK

cmyk(0%, 89%, 36%, 28%)

Oklch

oklch(52.1% 0.206 351.6)

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

#2E2322

Crimson · DarkSlateGray · Deep Berry

HEX

#2E2322

RGB

rgb(46, 35, 34)

HSL

hsl(5, 15%, 16%)

HSB

hsb(5, 26%, 18%)

CMYK

cmyk(0%, 24%, 26%, 82%)

Oklch

oklch(26.9% 0.017 24.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B4866

536548

Analogous

4C4865

5B4866

654862

Triadic

5B4866

655B48

48655B

Split-Comp.

5B4866

626548

48654C

Tetradic

5B4866

654C48

536548

486265

Contrast Matrix WCAG 2.1 Contrast

5B4866	7A4C87	957982	B81476	2E2322
—	1.3 Fail	2.1 Fail	1.3 Fail	1.9 Fail
1.3 Fail	—	1.7 Fail	1.1 Fail	2.3 Fail
2.1 Fail	1.7 Fail	—	1.6 Fail	3.9 AA Large
1.3 Fail	1.1 Fail	1.6 Fail	—	2.5 Fail
1.9 Fail	2.3 Fail	3.9 AA Large	2.5 Fail	—

White BG

8.2AAA

6.5AA

3.9AA Large

6.2AA

15.2AAA

Black BG

2.6Fail

3.2AA Large

5.3AA

3.4AA Large

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

53535F

666679

898980

71705E

292922

Deuteranopia

54555D

696C75

8B8D7F

7B8759

2A2B22

Tritanopia

5A5958

786D6B

947E7E

B04C47

2D2222

Achromatopsia

515151

606060

828282

505050

262626

Shades & Tints Shades & Tints

#5B4866

Dark

Light

#7A4C87

Dark

Light

#957982

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b4866;
  --color-2: #7a4c87;
  --color-3: #957982;
  --color-4: #b81476;
  --color-5: #2e2322;
}

SCSS

$color-1: #5b4866;
$color-2: #7a4c87;
$color-3: #957982;
$color-4: #b81476;
$color-5: #2e2322;

TAILWIND

colors: {
  'brand-1': '#5b4866',
  'brand-2': '#7a4c87',
  'brand-3': '#957982',
  'brand-4': '#b81476',
  'brand-5': '#2e2322',
}

RGB Array

[91, 72, 102], [122, 76, 135], [149, 121, 130], [184, 20, 118], [46, 35, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5B4866, #7A4C87, #957982, #B81476, #2E2322 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: #5b4866; --color-2: #7a4c87; --color-3: #957982; --color-4: #b81476; --color-5: #2e2322. 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