← Back to Editor

#9BB5E6 · #A884EB · #7740A6 · #9017E2 · #4D1ED9

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 App

Color Details Color Details

#9BB5E6

Azure · LightSteelBlue · Cobalt Blue

HEX
#9BB5E6
RGB
rgb(155, 181, 230)
HSL
hsl(219, 60%, 75%)
HSB
hsb(219, 33%, 90%)
CMYK
cmyk(33%, 21%, 0%, 10%)
Oklch
oklch(77.1% 0.076 262.9)

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

#A884EB

Wisteria · MediumSlateBlue · Lilac Purple

HEX
#A884EB
RGB
rgb(168, 132, 235)
HSL
hsl(261, 72%, 72%)
HSB
hsb(261, 44%, 92%)
CMYK
cmyk(29%, 44%, 0%, 8%)
Oklch
oklch(69.0% 0.150 298.5)

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

#7740A6

Dark Plum · SlateBlue · Violet

HEX
#7740A6
RGB
rgb(119, 64, 166)
HSL
hsl(272, 44%, 45%)
HSB
hsb(272, 61%, 65%)
CMYK
cmyk(28%, 61%, 0%, 35%)
Oklch
oklch(48.8% 0.161 306.2)

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

#9017E2

Royal Purple · DarkViolet · Violet

HEX
#9017E2
RGB
rgb(144, 23, 226)
HSL
hsl(276, 82%, 49%)
HSB
hsb(276, 90%, 89%)
CMYK
cmyk(36%, 90%, 0%, 11%)
Oklch
oklch(52.9% 0.264 304.5)

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

#4D1ED9

Deep Indigo · SlateBlue · Navy Blue

HEX
#4D1ED9
RGB
rgb(77, 30, 217)
HSL
hsl(255, 76%, 48%)
HSB
hsb(255, 86%, 85%)
CMYK
cmyk(65%, 86%, 0%, 15%)
Oklch
oklch(45.2% 0.250 281.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BB5E6
E6CB99

Analogous

99DAE6
9BB5E6
A499E6

Triadic

9BB5E6
E699B4
B4E699

Split-Comp.

9BB5E6
E6A499
DAE699

Tetradic

9BB5E6
E699DA
E6CB99
99E6A4

Contrast Matrix WCAG 2.1 Contrast

9BB5E6
A884EB
7740A6
9017E2
4D1ED9
—
1.4
Fail
3.3
AA Large
3.0
Fail
4.1
AA Large
1.4
Fail
—
2.3
Fail
2.1
Fail
2.9
Fail
3.3
AA Large
2.3
Fail
—
1.1
Fail
1.2
Fail
3.0
Fail
2.1
Fail
1.1
Fail
—
1.4
Fail
4.1
AA Large
2.9
Fail
1.2
Fail
1.4
Fail
—
White BG
2.1Fail
2.9Fail
6.8AA
6.2AA
8.4AAA
Black BG
10.1AAA
7.2AAA
3.1AA Large
3.4AA Large
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A6DA
9898D2
5F5F8D
5C5BB1
3938AC

Deuteranopia

A5A3D7
9B9DCC
626787
636CA5
3B3FA1

Tritanopia

9CD1CF
A6BEBA
747A76
8A8A82
4B8880

Achromatopsia

B3B3B3
9B9B9B
5C5C5C
525252
414141

Shades & Tints Shades & Tints

#9BB5E6

Dark
Light

#A884EB

Dark
Light

#7740A6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9bb5e6;
  --color-2: #a884eb;
  --color-3: #7740a6;
  --color-4: #9017e2;
  --color-5: #4d1ed9;
}

SCSS

$color-1: #9bb5e6;
$color-2: #a884eb;
$color-3: #7740a6;
$color-4: #9017e2;
$color-5: #4d1ed9;

TAILWIND

colors: {
  'brand-1': '#9bb5e6',
  'brand-2': '#a884eb',
  'brand-3': '#7740a6',
  'brand-4': '#9017e2',
  'brand-5': '#4d1ed9',
}

RGB Array

[155, 181, 230], [168, 132, 235], [119, 64, 166], [144, 23, 226], [77, 30, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9BB5E6, #A884EB, #7740A6, #9017E2, #4D1ED9 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #9bb5e6; --color-2: #a884eb; --color-3: #7740a6; --color-4: #9017e2; --color-5: #4d1ed9. 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 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