← Back to Editor

#5C2E6E · #8566A1 · #8D90BC · #B199AE · #5381AE

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5C2E6E

Dark Plum · DarkSlateBlue · Eggplant

HEX
#5C2E6E
RGB
rgb(92, 46, 110)
HSL
hsl(283, 41%, 31%)
HSB
hsb(283, 58%, 43%)
CMYK
cmyk(16%, 58%, 0%, 57%)
Oklch
oklch(39.1% 0.114 315.6)

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

#8566A1

Dark Plum · SlateGray · Violet

HEX
#8566A1
RGB
rgb(133, 102, 161)
HSL
hsl(272, 24%, 52%)
HSB
hsb(272, 37%, 63%)
CMYK
cmyk(17%, 37%, 0%, 37%)
Oklch
oklch(56.4% 0.095 307.7)

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

#8D90BC

Azure · DarkGray · Cobalt Blue

HEX
#8D90BC
RGB
rgb(141, 144, 188)
HSL
hsl(236, 26%, 65%)
HSB
hsb(236, 25%, 74%)
CMYK
cmyk(25%, 23%, 0%, 26%)
Oklch
oklch(66.7% 0.065 281.4)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#B199AE

Mauve · DarkGray · Lilac Purple

HEX
#B199AE
RGB
rgb(177, 153, 174)
HSL
hsl(308, 13%, 65%)
HSB
hsb(308, 14%, 69%)
CMYK
cmyk(0%, 14%, 2%, 31%)
Oklch
oklch(71.1% 0.041 330.1)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#5381AE

Indigo · SteelBlue · Navy Blue

HEX
#5381AE
RGB
rgb(83, 129, 174)
HSL
hsl(210, 36%, 50%)
HSB
hsb(210, 52%, 68%)
CMYK
cmyk(52%, 26%, 0%, 32%)
Oklch
oklch(58.9% 0.086 249.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C2E6E
416F2F

Analogous

3D2F6F
5C2E6E
6F2F61

Triadic

5C2E6E
6F5D2F
2F6F5D

Split-Comp.

5C2E6E
616F2F
2F6F3D

Tetradic

5C2E6E
6F3D2F
416F2F
2F616F

Contrast Matrix WCAG 2.1 Contrast

5C2E6E
8566A1
8D90BC
B199AE
5381AE
—
2.1
Fail
3.3
AA Large
3.9
AA Large
2.5
Fail
2.1
Fail
—
1.6
Fail
1.8
Fail
1.2
Fail
3.3
AA Large
1.6
Fail
—
1.2
Fail
1.3
Fail
3.9
AA Large
1.8
Fail
1.2
Fail
—
1.6
Fail
2.5
Fail
1.2
Fail
1.3
Fail
1.6
Fail
—
White BG
10.1AAA
4.8AA
3.1AA Large
2.6Fail
4.1AA Large
Black BG
2.1Fail
4.4AA Large
6.8AA
8.0AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

48485F
787793
8E8EB1
A7A6A9
6767A3

Deuteranopia

4B4E5B
797C8F
8E8EAF
A8AAA8
6461A1

Tritanopia

5A5250
838785
8DA9A7
B0A5A4
559B99

Achromatopsia

434343
767676
949494
A3A3A3
787878

Shades & Tints Shades & Tints

#5C2E6E

Dark
Light

#8566A1

Dark
Light

#8D90BC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c2e6e;
  --color-2: #8566a1;
  --color-3: #8d90bc;
  --color-4: #b199ae;
  --color-5: #5381ae;
}

SCSS

$color-1: #5c2e6e;
$color-2: #8566a1;
$color-3: #8d90bc;
$color-4: #b199ae;
$color-5: #5381ae;

TAILWIND

colors: {
  'brand-1': '#5c2e6e',
  'brand-2': '#8566a1',
  'brand-3': '#8d90bc',
  'brand-4': '#b199ae',
  'brand-5': '#5381ae',
}

RGB Array

[92, 46, 110], [133, 102, 161], [141, 144, 188], [177, 153, 174], [83, 129, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C2E6E, #8566A1, #8D90BC, #B199AE, #5381AE is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #5c2e6e; --color-2: #8566a1; --color-3: #8d90bc; --color-4: #b199ae; --color-5: #5381ae. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. Restrained colors convey professionalism and trust. 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