← Back to Editor

#8797AB · #A68887 · #595B7A · #E25C8B · #F96B77

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

#8797AB

Azure · LightSlateGray · Navy Blue

HEX
#8797AB
RGB
rgb(135, 151, 171)
HSL
hsl(213, 18%, 60%)
HSB
hsb(213, 21%, 67%)
CMYK
cmyk(21%, 12%, 0%, 33%)
Oklch
oklch(67.1% 0.035 254.1)

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

#A68887

Crimson · Gray · Passion Red

HEX
#A68887
RGB
rgb(166, 136, 135)
HSL
hsl(2, 15%, 59%)
HSB
hsb(2, 19%, 65%)
CMYK
cmyk(0%, 18%, 19%, 35%)
Oklch
oklch(65.4% 0.037 20.4)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#595B7A

Indigo · DimGray · Navy Blue

HEX
#595B7A
RGB
rgb(89, 91, 122)
HSL
hsl(236, 16%, 41%)
HSB
hsb(236, 27%, 48%)
CMYK
cmyk(27%, 25%, 0%, 52%)
Oklch
oklch(48.2% 0.050 281.5)

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

#E25C8B

Rouge · LightCoral · Rose Pink

HEX
#E25C8B
RGB
rgb(226, 92, 139)
HSL
hsl(339, 70%, 62%)
HSB
hsb(339, 59%, 89%)
CMYK
cmyk(0%, 59%, 38%, 11%)
Oklch
oklch(65.8% 0.172 1.1)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#F96B77

Peach Pink · Salmon · Coral Red

HEX
#F96B77
RGB
rgb(249, 107, 119)
HSL
hsl(355, 92%, 70%)
HSB
hsb(355, 57%, 98%)
CMYK
cmyk(0%, 57%, 52%, 2%)
Oklch
oklch(70.5% 0.174 17.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8797AB
AB9B87

Analogous

87AAAB
8797AB
8887AB

Triadic

8797AB
AB8797
97AB87

Split-Comp.

8797AB
AB8887
AAAB87

Tetradic

8797AB
AB87AA
AB9B87
87AB88

Contrast Matrix WCAG 2.1 Contrast

8797AB
A68887
595B7A
E25C8B
F96B77
—
1.1
Fail
2.2
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
2.0
Fail
1.1
Fail
1.1
Fail
2.2
Fail
2.0
Fail
—
1.9
Fail
2.3
Fail
1.1
Fail
1.1
Fail
1.9
Fail
—
1.2
Fail
1.1
Fail
1.1
Fail
2.3
Fail
1.2
Fail
—
White BG
3.0Fail
3.2AA Large
6.6AA
3.4AA Large
2.8Fail
Black BG
7.0AAA
6.5AA
3.2AA Large
6.1AA
7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8EA6
999987
5A5A72
A8A780
BCBA74

Deuteranopia

8D8CA5
9B9D87
5A5A71
B0BA7D
C4CE73

Tritanopia

88A2A2
A58787
596D6B
DB7775
F27271

Achromatopsia

949494
919191
5E5E5E
898989
979797

Shades & Tints Shades & Tints

#8797AB

Dark
Light

#A68887

Dark
Light

#595B7A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8797ab;
  --color-2: #a68887;
  --color-3: #595b7a;
  --color-4: #e25c8b;
  --color-5: #f96b77;
}

SCSS

$color-1: #8797ab;
$color-2: #a68887;
$color-3: #595b7a;
$color-4: #e25c8b;
$color-5: #f96b77;

TAILWIND

colors: {
  'brand-1': '#8797ab',
  'brand-2': '#a68887',
  'brand-3': '#595b7a',
  'brand-4': '#e25c8b',
  'brand-5': '#f96b77',
}

RGB Array

[135, 151, 171], [166, 136, 135], [89, 91, 122], [226, 92, 139], [249, 107, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #8797AB, #A68887, #595B7A, #E25C8B, #F96B77 is ideal for: corporate websites, product showcases, portfolios. 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: #8797ab; --color-2: #a68887; --color-3: #595b7a; --color-4: #e25c8b; --color-5: #f96b77. 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. 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