← Back to Editor

#9E5B8E · #8F5F95 · #81699B · #777DA9 · #769AAF

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9E5B8E

Rose Purple · Gray · Violet

HEX
#9E5B8E
RGB
rgb(158, 91, 142)
HSL
hsl(314, 27%, 49%)
HSB
hsb(314, 42%, 62%)
CMYK
cmyk(0%, 42%, 10%, 38%)
Oklch
oklch(56.5% 0.110 336.4)

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

#8F5F95

Dark Plum · Gray · Violet

HEX
#8F5F95
RGB
rgb(143, 95, 149)
HSL
hsl(293, 22%, 48%)
HSB
hsb(293, 36%, 58%)
CMYK
cmyk(4%, 36%, 0%, 42%)
Oklch
oklch(55.7% 0.098 322.9)

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

#81699B

Deep Indigo · SlateGray · Violet

HEX
#81699B
RGB
rgb(129, 105, 155)
HSL
hsl(269, 20%, 51%)
HSB
hsb(269, 32%, 61%)
CMYK
cmyk(17%, 32%, 0%, 39%)
Oklch
oklch(56.3% 0.080 305.9)

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

#777DA9

Azure · LightSlateGray · Navy Blue

HEX
#777DA9
RGB
rgb(119, 125, 169)
HSL
hsl(233, 23%, 56%)
HSB
hsb(233, 30%, 66%)
CMYK
cmyk(30%, 26%, 0%, 34%)
Oklch
oklch(60.2% 0.067 278.2)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#769AAF

Slate Blue · CadetBlue · Navy Blue

HEX
#769AAF
RGB
rgb(118, 154, 175)
HSL
hsl(202, 26%, 57%)
HSB
hsb(202, 33%, 69%)
CMYK
cmyk(33%, 12%, 0%, 31%)
Oklch
oklch(66.7% 0.051 234.1)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9E5B8E
5B9F6B

Analogous

8D5B9F
9E5B8E
9F5B6D

Triadic

9E5B8E
8F9F5B
5B8F9F

Split-Comp.

9E5B8E
6D9F5B
5B9F8D

Tetradic

9E5B8E
9F8D5B
5B9F6B
5B6D9F

Contrast Matrix WCAG 2.1 Contrast

9E5B8E
8F5F95
81699B
777DA9
769AAF
—
1.0
Fail
1.0
Fail
1.2
Fail
1.6
Fail
1.0
Fail
—
1.0
Fail
1.2
Fail
1.7
Fail
1.0
Fail
1.0
Fail
—
1.2
Fail
1.6
Fail
1.2
Fail
1.2
Fail
1.2
Fail
—
1.3
Fail
1.6
Fail
1.7
Fail
1.6
Fail
1.3
Fail
—
White BG
4.8AA
5.0AA
4.7AA
4.0AA Large
3.0Fail
Black BG
4.3AA Large
4.2AA Large
4.4AA Large
5.3AA
7.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

818082
7A7A88
77768F
7A7A9E
8686AA

Deuteranopia

858A7F
7D8185
787A8C
79799C
8481A9

Tritanopia

9B7876
8D7E7B
808583
779694
78A6A5

Achromatopsia

757575
747474
767676
808080
929292

Shades & Tints Shades & Tints

#9E5B8E

Dark
Light

#8F5F95

Dark
Light

#81699B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9e5b8e;
  --color-2: #8f5f95;
  --color-3: #81699b;
  --color-4: #777da9;
  --color-5: #769aaf;
}

SCSS

$color-1: #9e5b8e;
$color-2: #8f5f95;
$color-3: #81699b;
$color-4: #777da9;
$color-5: #769aaf;

TAILWIND

colors: {
  'brand-1': '#9e5b8e',
  'brand-2': '#8f5f95',
  'brand-3': '#81699b',
  'brand-4': '#777da9',
  'brand-5': '#769aaf',
}

RGB Array

[158, 91, 142], [143, 95, 149], [129, 105, 155], [119, 125, 169], [118, 154, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #9E5B8E, #8F5F95, #81699B, #777DA9, #769AAF is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9e5b8e; --color-2: #8f5f95; --color-3: #81699b; --color-4: #777da9; --color-5: #769aaf. 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 sunset-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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