← Back to Editor

#989AEF · #9C7BE6 · #86027A · #4A0A7A · #120D2D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#989AEF

Azure · LightSteelBlue · Cobalt Blue

HEX
#989AEF
RGB
rgb(152, 154, 239)
HSL
hsl(239, 73%, 77%)
HSB
hsb(239, 36%, 94%)
CMYK
cmyk(36%, 36%, 0%, 6%)
Oklch
oklch(71.9% 0.123 281.8)

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

#9C7BE6

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#9C7BE6
RGB
rgb(156, 123, 230)
HSL
hsl(259, 68%, 69%)
HSB
hsb(259, 47%, 90%)
CMYK
cmyk(32%, 47%, 0%, 10%)
Oklch
oklch(66.0% 0.156 296.1)

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

#86027A

Rose Purple · Purple · Eggplant

HEX
#86027A
RGB
rgb(134, 2, 122)
HSL
hsl(305, 97%, 27%)
HSB
hsb(305, 99%, 53%)
CMYK
cmyk(0%, 99%, 9%, 47%)
Oklch
oklch(42.8% 0.191 333.2)

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

#4A0A7A

Royal Purple · MidnightBlue · Eggplant

HEX
#4A0A7A
RGB
rgb(74, 10, 122)
HSL
hsl(274, 85%, 26%)
HSB
hsb(274, 92%, 48%)
CMYK
cmyk(39%, 92%, 0%, 52%)
Oklch
oklch(33.5% 0.166 303.3)

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

#120D2D

Deep Indigo · Black · Deep Sea Blue

HEX
#120D2D
RGB
rgb(18, 13, 45)
HSL
hsl(249, 55%, 11%)
HSB
hsb(249, 71%, 18%)
CMYK
cmyk(60%, 71%, 0%, 82%)
Oklch
oklch(18.8% 0.062 286.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

989AEF
EFEE9A

Analogous

9AC6EF
989AEF
C39AEF

Triadic

989AEF
EF9A9B
9BEF9A

Split-Comp.

989AEF
EFC39A
C6EF9A

Tetradic

989AEF
EF9AC6
EFEE9A
9AEFC3

Contrast Matrix WCAG 2.1 Contrast

989AEF
9C7BE6
86027A
4A0A7A
120D2D
—
1.3
Fail
3.6
AA Large
5.1
AA
7.3
AAA
1.3
Fail
—
2.8
Fail
4.0
AA Large
5.7
AA
3.6
AA Large
2.8
Fail
—
1.4
Fail
2.1
Fail
5.1
AA
4.0
AA Large
1.4
Fail
—
1.4
Fail
7.3
AAA
5.7
AA
2.1
Fail
1.4
Fail
—
White BG
2.6Fail
3.3AA Large
9.1AAA
13.0AAA
18.7AAA
Black BG
8.2AAA
6.4AA
2.3Fail
1.6Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9999DA
8E8DCC
4D4C5D
2E2E5F
101025

Deuteranopia

9999D5
9092C6
555E56
323758
101123

Tritanopia

98CAC7
9AB8B3
7F4641
474A45
121F1E

Achromatopsia

A3A3A3
919191
373737
2A2A2A
121212

Shades & Tints Shades & Tints

#989AEF

Dark
Light

#9C7BE6

Dark
Light

#86027A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #989aef;
  --color-2: #9c7be6;
  --color-3: #86027a;
  --color-4: #4a0a7a;
  --color-5: #120d2d;
}

SCSS

$color-1: #989aef;
$color-2: #9c7be6;
$color-3: #86027a;
$color-4: #4a0a7a;
$color-5: #120d2d;

TAILWIND

colors: {
  'brand-1': '#989aef',
  'brand-2': '#9c7be6',
  'brand-3': '#86027a',
  'brand-4': '#4a0a7a',
  'brand-5': '#120d2d',
}

RGB Array

[152, 154, 239], [156, 123, 230], [134, 2, 122], [74, 10, 122], [18, 13, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #989AEF, #9C7BE6, #86027A, #4A0A7A, #120D2D is ideal for: social media posters, mobile apps, e-commerce promos, 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: #989aef; --color-2: #9c7be6; --color-3: #86027a; --color-4: #4a0a7a; --color-5: #120d2d. 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 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