← Back to Editor

#887EF2 · #A681F0 · #C482ED · #F081D6 · #2A2930

sunset

A 5-color sunset 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

#887EF2

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#887EF2
RGB
rgb(136, 126, 242)
HSL
hsl(245, 82%, 72%)
HSB
hsb(245, 48%, 95%)
CMYK
cmyk(44%, 48%, 0%, 5%)
Oklch
oklch(65.6% 0.168 284.7)

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

#A681F0

Wisteria · MediumSlateBlue · Lilac Purple

HEX
#A681F0
RGB
rgb(166, 129, 240)
HSL
hsl(260, 79%, 72%)
HSB
hsb(260, 46%, 94%)
CMYK
cmyk(31%, 46%, 0%, 6%)
Oklch
oklch(68.5% 0.161 297.3)

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

#C482ED

Lilac · Orchid · Lilac Purple

HEX
#C482ED
RGB
rgb(196, 130, 237)
HSL
hsl(277, 75%, 72%)
HSB
hsb(277, 45%, 93%)
CMYK
cmyk(17%, 45%, 0%, 7%)
Oklch
oklch(71.5% 0.164 311.3)

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

#F081D6

Mauve · Violet · Lilac Purple

HEX
#F081D6
RGB
rgb(240, 129, 214)
HSL
hsl(314, 79%, 72%)
HSB
hsb(314, 46%, 94%)
CMYK
cmyk(0%, 46%, 11%, 6%)
Oklch
oklch(75.3% 0.169 336.6)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#2A2930

Deep Indigo · DarkSlateGray · Dark Stone

HEX
#2A2930
RGB
rgb(42, 41, 48)
HSL
hsl(249, 8%, 17%)
HSB
hsb(249, 15%, 19%)
CMYK
cmyk(13%, 15%, 0%, 81%)
Oklch
oklch(28.5% 0.013 292.1)

Traditional「Deep Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

887EF2
E8F27D

Analogous

7DAEF2
887EF2
C17DF2

Triadic

887EF2
F2877D
7DF287

Split-Comp.

887EF2
F2C17D
AEF27D

Tetradic

887EF2
F27DAE
E8F27D
7DF2C1

Contrast Matrix WCAG 2.1 Contrast

887EF2
A681F0
C482ED
F081D6
2A2930
—
1.1
Fail
1.2
Fail
1.4
Fail
4.3
AA Large
1.1
Fail
—
1.1
Fail
1.3
Fail
4.8
AA
1.2
Fail
1.1
Fail
—
1.1
Fail
5.3
AA
1.4
Fail
1.3
Fail
1.1
Fail
—
6.0
AA
4.3
AA Large
4.8
AA
5.3
AA
6.0
AA
—
White BG
3.3AA Large
3.0Fail
2.7Fail
2.4Fail
14.4AAA
Black BG
6.3AA
7.0AAA
7.8AAA
8.8AAA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8484D6
9696D5
A7A7D3
C0BFC1
2A2A2E

Deuteranopia

8485CF
989BCF
ABB0CD
C6CFBC
2A2A2E

Tritanopia

88C0BB
A4C0BB
C1BFBA
EAB1AE
2A2D2D

Achromatopsia

8E8E8E
999999
A2A2A2
ACACAC
2A2A2A

Shades & Tints Shades & Tints

#887EF2

Dark
Light

#A681F0

Dark
Light

#C482ED

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #887ef2;
  --color-2: #a681f0;
  --color-3: #c482ed;
  --color-4: #f081d6;
  --color-5: #2a2930;
}

SCSS

$color-1: #887ef2;
$color-2: #a681f0;
$color-3: #c482ed;
$color-4: #f081d6;
$color-5: #2a2930;

TAILWIND

colors: {
  'brand-1': '#887ef2',
  'brand-2': '#a681f0',
  'brand-3': '#c482ed',
  'brand-4': '#f081d6',
  'brand-5': '#2a2930',
}

RGB Array

[136, 126, 242], [166, 129, 240], [196, 130, 237], [240, 129, 214], [42, 41, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #887EF2, #A681F0, #C482ED, #F081D6, #2A2930 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: #887ef2; --color-2: #a681f0; --color-3: #c482ed; --color-4: #f081d6; --color-5: #2a2930. 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 sunset-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