← Back to Editor

#A36B85 · #BD766C · #CC8C48 · #ECC15E · #F3E8B3

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

#A36B85

Dark Violet · Gray · Rose Pink

HEX
#A36B85
RGB
rgb(163, 107, 133)
HSL
hsl(332, 23%, 53%)
HSB
hsb(332, 34%, 64%)
CMYK
cmyk(0%, 34%, 18%, 36%)
Oklch
oklch(59.5% 0.079 350.4)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#BD766C

Crimson · LightCoral · Passion Red

HEX
#BD766C
RGB
rgb(189, 118, 108)
HSL
hsl(7, 38%, 58%)
HSB
hsb(7, 43%, 74%)
CMYK
cmyk(0%, 38%, 43%, 26%)
Oklch
oklch(63.9% 0.091 28.5)

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

#CC8C48

Ginger · GoldenRod · Warm Sun

HEX
#CC8C48
RGB
rgb(204, 140, 72)
HSL
hsl(31, 56%, 54%)
HSB
hsb(31, 65%, 80%)
CMYK
cmyk(0%, 31%, 65%, 20%)
Oklch
oklch(69.1% 0.115 65.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#ECC15E

Ginger · SandyBrown · Sunflower

HEX
#ECC15E
RGB
rgb(236, 193, 94)
HSL
hsl(42, 79%, 65%)
HSB
hsb(42, 60%, 93%)
CMYK
cmyk(0%, 18%, 60%, 7%)
Oklch
oklch(83.0% 0.127 85.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F3E8B3

Fresh Green · Wheat · Lemon Cream

HEX
#F3E8B3
RGB
rgb(243, 232, 179)
HSL
hsl(50, 73%, 83%)
HSB
hsb(50, 26%, 95%)
CMYK
cmyk(0%, 5%, 26%, 5%)
Oklch
oklch(92.7% 0.069 97.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A36B85
6CA389

Analogous

A36CA1
A36B85
A36D6C

Triadic

A36B85
85A36C
6C85A3

Split-Comp.

A36B85
6CA36D
6CA1A3

Tetradic

A36B85
A1A36C
6CA389
6D6CA3

Contrast Matrix WCAG 2.1 Contrast

A36B85
BD766C
CC8C48
ECC15E
F3E8B3
—
1.2
Fail
1.5
Fail
2.5
Fail
3.4
AA Large
1.2
Fail
—
1.2
Fail
2.1
Fail
2.8
Fail
1.5
Fail
1.2
Fail
—
1.7
Fail
2.3
Fail
2.5
Fail
2.1
Fail
1.7
Fail
—
1.4
Fail
3.4
AA Large
2.8
Fail
2.3
Fail
1.4
Fail
—
White BG
4.2AA Large
3.5AA Large
2.8Fail
1.7Fail
1.2Fail
Black BG
5.0AA
6.0AA
7.4AAA
12.4AAA
17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8A7F
9E9E6E
B0B058
D9D976
EEEEC0

Deuteranopia

8E927D
A2A86F
B4B95C
DCDF7C
EFF0C3

Tritanopia

A07A79
B97071
C96568
EA898D
F2CACC

Achromatopsia

7F7F7F
8A8A8A
979797
C3C3C3
E5E5E5

Shades & Tints Shades & Tints

#A36B85

Dark
Light

#BD766C

Dark
Light

#CC8C48

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a36b85;
  --color-2: #bd766c;
  --color-3: #cc8c48;
  --color-4: #ecc15e;
  --color-5: #f3e8b3;
}

SCSS

$color-1: #a36b85;
$color-2: #bd766c;
$color-3: #cc8c48;
$color-4: #ecc15e;
$color-5: #f3e8b3;

TAILWIND

colors: {
  'brand-1': '#a36b85',
  'brand-2': '#bd766c',
  'brand-3': '#cc8c48',
  'brand-4': '#ecc15e',
  'brand-5': '#f3e8b3',
}

RGB Array

[163, 107, 133], [189, 118, 108], [204, 140, 72], [236, 193, 94], [243, 232, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #A36B85, #BD766C, #CC8C48, #ECC15E, #F3E8B3 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: #a36b85; --color-2: #bd766c; --color-3: #cc8c48; --color-4: #ecc15e; --color-5: #f3e8b3. 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