← Back to Editor

#E5800E · #EEC130 · #C1A746 · #A69E5F · #79916F

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

#E5800E

Ochre · Chocolate · Amber Brown

HEX
#E5800E
RGB
rgb(229, 128, 14)
HSL
hsl(32, 88%, 48%)
HSB
hsb(32, 94%, 90%)
CMYK
cmyk(0%, 44%, 94%, 10%)
Oklch
oklch(69.7% 0.162 59.0)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#EEC130

Ginger · GoldenRod · Sunflower

HEX
#EEC130
RGB
rgb(238, 193, 48)
HSL
hsl(46, 85%, 56%)
HSB
hsb(46, 80%, 93%)
CMYK
cmyk(0%, 19%, 80%, 7%)
Oklch
oklch(82.8% 0.157 90.1)

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

#C1A746

Ginger · GoldenRod · Sunflower

HEX
#C1A746
RGB
rgb(193, 167, 70)
HSL
hsl(47, 50%, 52%)
HSB
hsb(47, 64%, 76%)
CMYK
cmyk(0%, 13%, 64%, 24%)
Oklch
oklch(73.3% 0.120 94.2)

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

#A69E5F

Autumn Sage · Gray · Sunflower

HEX
#A69E5F
RGB
rgb(166, 158, 95)
HSL
hsl(53, 29%, 51%)
HSB
hsb(53, 43%, 65%)
CMYK
cmyk(0%, 5%, 43%, 35%)
Oklch
oklch(69.2% 0.084 102.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#79916F

Celadon · Gray · Olive Green

HEX
#79916F
RGB
rgb(121, 145, 111)
HSL
hsl(102, 13%, 50%)
HSB
hsb(102, 23%, 57%)
CMYK
cmyk(17%, 0%, 23%, 43%)
Oklch
oklch(62.8% 0.057 136.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E5800E
0F73E6

Analogous

E6160F
E5800E
DFE60F

Triadic

E5800E
0FE682
820FE6

Split-Comp.

E5800E
0FDFE6
160FE6

Tetradic

E5800E
0FE616
0F73E6
E60FDF

Contrast Matrix WCAG 2.1 Contrast

E5800E
EEC130
C1A746
A69E5F
79916F
—
1.7
Fail
1.2
Fail
1.0
Fail
1.2
Fail
1.7
Fail
—
1.4
Fail
1.6
Fail
2.0
Fail
1.2
Fail
1.4
Fail
—
1.2
Fail
1.5
Fail
1.0
Fail
1.6
Fail
1.2
Fail
—
1.3
Fail
1.2
Fail
2.0
Fail
1.5
Fail
1.3
Fail
—
White BG
2.8Fail
1.7Fail
2.4Fail
2.7Fail
3.4AA Large
Black BG
7.4AAA
12.3AAA
8.9AAA
7.7AAA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B82A
DBDA53
B6B65D
A3A26E
838477

Deuteranopia

BFC730
DDE15C
B7B963
A3A472
828079

Tritanopia

E03F44
EC6F75
C07074
A67A7D
7A7E7F

Achromatopsia

919191
BEBEBE
A4A4A4
999999
868686

Shades & Tints Shades & Tints

#E5800E

Dark
Light

#EEC130

Dark
Light

#C1A746

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e5800e;
  --color-2: #eec130;
  --color-3: #c1a746;
  --color-4: #a69e5f;
  --color-5: #79916f;
}

SCSS

$color-1: #e5800e;
$color-2: #eec130;
$color-3: #c1a746;
$color-4: #a69e5f;
$color-5: #79916f;

TAILWIND

colors: {
  'brand-1': '#e5800e',
  'brand-2': '#eec130',
  'brand-3': '#c1a746',
  'brand-4': '#a69e5f',
  'brand-5': '#79916f',
}

RGB Array

[229, 128, 14], [238, 193, 48], [193, 167, 70], [166, 158, 95], [121, 145, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #E5800E, #EEC130, #C1A746, #A69E5F, #79916F 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: #e5800e; --color-2: #eec130; --color-3: #c1a746; --color-4: #a69e5f; --color-5: #79916f. 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