← Back to Editor

#AA58B7 · #9D69C5 · #9474CF · #8884DD · #40464C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#AA58B7

Dark Plum · MediumOrchid · Violet

HEX
#AA58B7
RGB
rgb(170, 88, 183)
HSL
hsl(292, 40%, 53%)
HSB
hsb(292, 52%, 72%)
CMYK
cmyk(7%, 52%, 0%, 28%)
Oklch
oklch(59.4% 0.163 322.0)

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

#9D69C5

Dark Plum · MediumOrchid · Violet

HEX
#9D69C5
RGB
rgb(157, 105, 197)
HSL
hsl(274, 44%, 59%)
HSB
hsb(274, 47%, 77%)
CMYK
cmyk(20%, 47%, 0%, 23%)
Oklch
oklch(61.3% 0.144 308.8)

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

#9474CF

Wisteria · MediumSlateBlue · Lilac Purple

HEX
#9474CF
RGB
rgb(148, 116, 207)
HSL
hsl(261, 49%, 63%)
HSB
hsb(261, 44%, 81%)
CMYK
cmyk(29%, 44%, 0%, 19%)
Oklch
oklch(62.8% 0.136 298.6)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#8884DD

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#8884DD
RGB
rgb(136, 132, 221)
HSL
hsl(243, 57%, 69%)
HSB
hsb(243, 40%, 87%)
CMYK
cmyk(38%, 40%, 0%, 13%)
Oklch
oklch(65.5% 0.131 284.2)

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

#40464C

Indigo · DarkSlateGray · Charcoal

HEX
#40464C
RGB
rgb(64, 70, 76)
HSL
hsl(210, 9%, 27%)
HSB
hsb(210, 16%, 30%)
CMYK
cmyk(16%, 8%, 0%, 70%)
Oklch
oklch(39.1% 0.013 248.2)

Traditional「Indigo」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AA58B7
64B757

Analogous

7A57B7
AA58B7
B75794

Triadic

AA58B7
B7AA57
57B7AA

Split-Comp.

AA58B7
94B757
57B77A

Tetradic

AA58B7
B77A57
64B757
5794B7

Contrast Matrix WCAG 2.1 Contrast

AA58B7
9D69C5
9474CF
8884DD
40464C
—
1.1
Fail
1.2
Fail
1.3
Fail
2.2
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
2.4
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
2.6
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
2.9
Fail
2.2
Fail
2.4
Fail
2.6
Fail
2.9
Fail
—
White BG
4.4AA Large
4.0AA Large
3.7AA Large
3.3AA Large
9.6AAA
Black BG
4.8AA
5.3AA
5.7AA
6.4AA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8686A0
8686AF
8686B9
8686C7
43434B

Deuteranopia

8B919B
8A8DA9
888AB4
8787C2
42424A

Tritanopia

A68E8A
9A9D99
92A8A4
88B6B3
404949

Achromatopsia

7B7B7B
838383
888888
8F8F8F
454545

Shades & Tints Shades & Tints

#AA58B7

Dark
Light

#9D69C5

Dark
Light

#9474CF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aa58b7;
  --color-2: #9d69c5;
  --color-3: #9474cf;
  --color-4: #8884dd;
  --color-5: #40464c;
}

SCSS

$color-1: #aa58b7;
$color-2: #9d69c5;
$color-3: #9474cf;
$color-4: #8884dd;
$color-5: #40464c;

TAILWIND

colors: {
  'brand-1': '#aa58b7',
  'brand-2': '#9d69c5',
  'brand-3': '#9474cf',
  'brand-4': '#8884dd',
  'brand-5': '#40464c',
}

RGB Array

[170, 88, 183], [157, 105, 197], [148, 116, 207], [136, 132, 221], [64, 70, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AA58B7, #9D69C5, #9474CF, #8884DD, #40464C 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: #aa58b7; --color-2: #9d69c5; --color-3: #9474cf; --color-4: #8884dd; --color-5: #40464c. 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