← Back to Editor

#9B84F6 · #6B4497 · #58076D · #390C5D · #061731

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#9B84F6

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#9B84F6
RGB
rgb(155, 132, 246)
HSL
hsl(252, 86%, 74%)
HSB
hsb(252, 46%, 96%)
CMYK
cmyk(37%, 46%, 0%, 4%)
Oklch
oklch(68.4% 0.164 290.7)

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

#6B4497

Deep Indigo · DarkSlateBlue · Violet

HEX
#6B4497
RGB
rgb(107, 68, 151)
HSL
hsl(268, 38%, 43%)
HSB
hsb(268, 55%, 59%)
CMYK
cmyk(29%, 55%, 0%, 41%)
Oklch
oklch(47.1% 0.133 303.4)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#58076D

Royal Purple · Purple · Eggplant

HEX
#58076D
RGB
rgb(88, 7, 109)
HSL
hsl(288, 88%, 23%)
HSB
hsb(288, 94%, 43%)
CMYK
cmyk(19%, 94%, 0%, 57%)
Oklch
oklch(34.3% 0.160 317.3)

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

#390C5D

Royal Purple · MidnightBlue · Eggplant

HEX
#390C5D
RGB
rgb(57, 12, 93)
HSL
hsl(273, 77%, 21%)
HSB
hsb(273, 87%, 36%)
CMYK
cmyk(39%, 87%, 0%, 64%)
Oklch
oklch(28.5% 0.131 303.9)

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

#061731

Indigo · Black · Deep Sea Blue

HEX
#061731
RGB
rgb(6, 23, 49)
HSL
hsl(216, 78%, 11%)
HSB
hsb(216, 88%, 19%)
CMYK
cmyk(88%, 53%, 0%, 81%)
Oklch
oklch(20.7% 0.057 258.3)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9B84F6
DFF684

Analogous

84A6F6
9B84F6
D484F6

Triadic

9B84F6
F69A84
84F69A

Split-Comp.

9B84F6
F6D484
A6F684

Tetradic

9B84F6
F684A6
DFF684
84F6D4

Contrast Matrix WCAG 2.1 Contrast

9B84F6
6B4497
58076D
390C5D
061731
—
2.4
Fail
4.2
AA Large
5.1
AA
6.0
AA
2.4
Fail
—
1.7
Fail
2.1
Fail
2.5
Fail
4.2
AA Large
1.7
Fail
—
1.2
Fail
1.4
Fail
5.1
AA
2.1
Fail
1.2
Fail
—
1.2
Fail
6.0
AA
2.5
Fail
1.4
Fail
1.2
Fail
—
White BG
3.0Fail
7.2AAA
12.6AAA
15.2AAA
17.9AAA
Black BG
7.0AAA
2.9Fail
1.7Fail
1.4Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9191DA
5A5A83
353454
262549
0D0E2B

Deuteranopia

9294D4
5C5F7E
3A404E
282C45
0C0B29

Tritanopia

9AC5C0
697370
54413D
373A37
072625

Achromatopsia

989898
595959
2B2B2B
232323
151515

Shades & Tints Shades & Tints

#9B84F6

Dark
Light

#6B4497

Dark
Light

#58076D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9b84f6;
  --color-2: #6b4497;
  --color-3: #58076d;
  --color-4: #390c5d;
  --color-5: #061731;
}

SCSS

$color-1: #9b84f6;
$color-2: #6b4497;
$color-3: #58076d;
$color-4: #390c5d;
$color-5: #061731;

TAILWIND

colors: {
  'brand-1': '#9b84f6',
  'brand-2': '#6b4497',
  'brand-3': '#58076d',
  'brand-4': '#390c5d',
  'brand-5': '#061731',
}

RGB Array

[155, 132, 246], [107, 68, 151], [88, 7, 109], [57, 12, 93], [6, 23, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9B84F6, #6B4497, #58076D, #390C5D, #061731 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9b84f6; --color-2: #6b4497; --color-3: #58076d; --color-4: #390c5d; --color-5: #061731. 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. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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