← Back to Editor

#AC80CB · #BA8DA2 · #C89B76 · #D7AA47 · #E6B915

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AC80CB

Lilac · MediumOrchid · Lilac Purple

HEX
#AC80CB
RGB
rgb(172, 128, 203)
HSL
hsl(275, 42%, 65%)
HSB
hsb(275, 37%, 80%)
CMYK
cmyk(15%, 37%, 0%, 20%)
Oklch
oklch(67.1% 0.118 310.4)

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

#BA8DA2

Rouge · DarkGray · Rose Pink

HEX
#BA8DA2
RGB
rgb(186, 141, 162)
HSL
hsl(332, 25%, 64%)
HSB
hsb(332, 24%, 73%)
CMYK
cmyk(0%, 24%, 13%, 27%)
Oklch
oklch(69.3% 0.061 349.2)

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

#C89B76

Apricot · DarkSalmon · Warm Sun

HEX
#C89B76
RGB
rgb(200, 155, 118)
HSL
hsl(27, 43%, 62%)
HSB
hsb(27, 41%, 78%)
CMYK
cmyk(0%, 23%, 41%, 22%)
Oklch
oklch(72.3% 0.074 60.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#D7AA47

Ginger · SandyBrown · Sunflower

HEX
#D7AA47
RGB
rgb(215, 170, 71)
HSL
hsl(41, 64%, 56%)
HSB
hsb(41, 67%, 84%)
CMYK
cmyk(0%, 21%, 67%, 16%)
Oklch
oklch(76.1% 0.127 84.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#E6B915

Ochre · GoldenRod · Honey Gold

HEX
#E6B915
RGB
rgb(230, 185, 21)
HSL
hsl(47, 83%, 49%)
HSB
hsb(47, 91%, 90%)
CMYK
cmyk(0%, 20%, 91%, 10%)
Oklch
oklch(80.3% 0.161 90.6)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AC80CB
A0CB80

Analogous

8780CB
AC80CB
CB80C5

Triadic

AC80CB
CBAC80
80CBAC

Split-Comp.

AC80CB
C5CB80
80CB87

Tetradic

AC80CB
CB8780
A0CB80
80C5CB

Contrast Matrix WCAG 2.1 Contrast

AC80CB
BA8DA2
C89B76
D7AA47
E6B915
—
1.1
Fail
1.3
Fail
1.5
Fail
1.7
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.5
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.7
Fail
1.5
Fail
1.3
Fail
1.2
Fail
—
White BG
3.1AA Large
2.8Fail
2.5Fail
2.2Fail
1.9Fail
Black BG
6.7AA
7.4AAA
8.4AAA
9.7AAA
11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9999B9
A7A69D
B5B47F
C4C35F
D3D23D

Deuteranopia

9C9FB5
A9AD9C
B7BB81
C6CA65
D5D946

Tritanopia

AAABA7
B89998
C68688
D57276
E45C63

Achromatopsia

969696
9D9D9D
A4A4A4
ACACAC
B4B4B4

Shades & Tints Shades & Tints

#AC80CB

Dark
Light

#BA8DA2

Dark
Light

#C89B76

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ac80cb;
  --color-2: #ba8da2;
  --color-3: #c89b76;
  --color-4: #d7aa47;
  --color-5: #e6b915;
}

SCSS

$color-1: #ac80cb;
$color-2: #ba8da2;
$color-3: #c89b76;
$color-4: #d7aa47;
$color-5: #e6b915;

TAILWIND

colors: {
  'brand-1': '#ac80cb',
  'brand-2': '#ba8da2',
  'brand-3': '#c89b76',
  'brand-4': '#d7aa47',
  'brand-5': '#e6b915',
}

RGB Array

[172, 128, 203], [186, 141, 162], [200, 155, 118], [215, 170, 71], [230, 185, 21]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #AC80CB, #BA8DA2, #C89B76, #D7AA47, #E6B915 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: #ac80cb; --color-2: #ba8da2; --color-3: #c89b76; --color-4: #d7aa47; --color-5: #e6b915. 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