← Back to Editor

#5C1F71 · #9F658D · #CAA9B8 · #BBB2DC · #9386AF

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 LibraryData Visualization

Color Details Color Details

#5C1F71

Royal Purple · DarkSlateBlue · Eggplant

HEX
#5C1F71
RGB
rgb(92, 31, 113)
HSL
hsl(285, 57%, 28%)
HSB
hsb(285, 73%, 44%)
CMYK
cmyk(19%, 73%, 0%, 56%)
Oklch
oklch(37.2% 0.141 316.1)

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

#9F658D

Rose Purple · Gray · Violet

HEX
#9F658D
RGB
rgb(159, 101, 141)
HSL
hsl(319, 23%, 51%)
HSB
hsb(319, 36%, 62%)
CMYK
cmyk(0%, 36%, 11%, 38%)
Oklch
oklch(58.3% 0.092 339.1)

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

#CAA9B8

Rouge · Silver · Rose Pink

HEX
#CAA9B8
RGB
rgb(202, 169, 184)
HSL
hsl(333, 24%, 73%)
HSB
hsb(333, 16%, 79%)
CMYK
cmyk(0%, 16%, 9%, 21%)
Oklch
oklch(76.8% 0.043 349.0)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#BBB2DC

Wisteria · LightSteelBlue · Cobalt Blue

HEX
#BBB2DC
RGB
rgb(187, 178, 220)
HSL
hsl(253, 38%, 78%)
HSB
hsb(253, 19%, 86%)
CMYK
cmyk(15%, 19%, 0%, 14%)
Oklch
oklch(78.5% 0.060 294.8)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#9386AF

Wisteria · LightSlateGray · Cobalt Blue

HEX
#9386AF
RGB
rgb(147, 134, 175)
HSL
hsl(259, 20%, 61%)
HSB
hsb(259, 23%, 69%)
CMYK
cmyk(16%, 23%, 0%, 31%)
Oklch
oklch(64.6% 0.062 299.2)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C1F71
33701F

Analogous

331F70
5C1F71
701F5C

Triadic

5C1F71
705C1F
1F705C

Split-Comp.

5C1F71
5C701F
1F7033

Tetradic

5C1F71
70331F
33701F
1F5C70

Contrast Matrix WCAG 2.1 Contrast

5C1F71
9F658D
CAA9B8
BBB2DC
9386AF
—
2.5
Fail
5.2
AA
5.6
AA
3.3
AA Large
2.5
Fail
—
2.1
Fail
2.2
Fail
1.3
Fail
5.2
AA
2.1
Fail
—
1.1
Fail
1.6
Fail
5.6
AA
2.2
Fail
1.1
Fail
—
1.7
Fail
3.3
AA Large
1.3
Fail
1.6
Fail
1.7
Fail
—
White BG
11.1AAA
4.4AA Large
2.1Fail
2.0Fail
3.3AA Large
Black BG
1.9Fail
4.7AA
9.9AAA
10.5AAA
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

42415D
868583
BCBBB4
B7B7D2
8D8DA5

Deuteranopia

454A58
898E81
BEC0B3
B8B8CF
8E8FA3

Tritanopia

594D4A
9C7C7A
C8B2B1
BBCAC8
929D9C

Achromatopsia

3B3B3B
7B7B7B
B5B5B5
B9B9B9
8F8F8F

Shades & Tints Shades & Tints

#5C1F71

Dark
Light

#9F658D

Dark
Light

#CAA9B8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c1f71;
  --color-2: #9f658d;
  --color-3: #caa9b8;
  --color-4: #bbb2dc;
  --color-5: #9386af;
}

SCSS

$color-1: #5c1f71;
$color-2: #9f658d;
$color-3: #caa9b8;
$color-4: #bbb2dc;
$color-5: #9386af;

TAILWIND

colors: {
  'brand-1': '#5c1f71',
  'brand-2': '#9f658d',
  'brand-3': '#caa9b8',
  'brand-4': '#bbb2dc',
  'brand-5': '#9386af',
}

RGB Array

[92, 31, 113], [159, 101, 141], [202, 169, 184], [187, 178, 220], [147, 134, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C1F71, #9F658D, #CAA9B8, #BBB2DC, #9386AF is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #5c1f71; --color-2: #9f658d; --color-3: #caa9b8; --color-4: #bbb2dc; --color-5: #9386af. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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