← Back to Editor

#E5A073 · #E68C66 · #CA785D · #986E64 · #4A6972

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

#E5A073

Apricot · DarkSalmon · Warm Sun

HEX
#E5A073
RGB
rgb(229, 160, 115)
HSL
hsl(24, 69%, 67%)
HSB
hsb(24, 50%, 90%)
CMYK
cmyk(0%, 30%, 50%, 10%)
Oklch
oklch(76.3% 0.102 53.7)

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

#E68C66

Apricot · DarkSalmon · Warm Sun

HEX
#E68C66
RGB
rgb(230, 140, 102)
HSL
hsl(18, 72%, 65%)
HSB
hsb(18, 56%, 90%)
CMYK
cmyk(0%, 39%, 56%, 10%)
Oklch
oklch(72.6% 0.122 43.4)

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

#CA785D

Tangerine · DarkSalmon · Warm Sun

HEX
#CA785D
RGB
rgb(202, 120, 93)
HSL
hsl(15, 51%, 58%)
HSB
hsb(15, 54%, 79%)
CMYK
cmyk(0%, 41%, 54%, 21%)
Oklch
oklch(65.6% 0.110 39.0)

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

#986E64

Crimson · Gray · Passion Red

HEX
#986E64
RGB
rgb(152, 110, 100)
HSL
hsl(12, 21%, 49%)
HSB
hsb(12, 34%, 60%)
CMYK
cmyk(0%, 28%, 34%, 40%)
Oklch
oklch(57.8% 0.056 33.8)

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

#4A6972

Slate Blue · DimGray · Mint Ice

HEX
#4A6972
RGB
rgb(74, 105, 114)
HSL
hsl(194, 21%, 37%)
HSB
hsb(194, 35%, 45%)
CMYK
cmyk(35%, 8%, 0%, 55%)
Oklch
oklch(50.0% 0.039 217.7)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E5A073
71B6E5

Analogous

E5717C
E5A073
E5D971

Triadic

E5A073
71E59F
9F71E5

Split-Comp.

E5A073
71E5D9
717CE5

Tetradic

E5A073
7CE571
71B6E5
D971E5

Contrast Matrix WCAG 2.1 Contrast

E5A073
E68C66
CA785D
986E64
4A6972
—
1.2
Fail
1.5
Fail
2.0
Fail
2.7
Fail
1.2
Fail
—
1.3
Fail
1.7
Fail
2.3
Fail
1.5
Fail
1.3
Fail
—
1.3
Fail
1.8
Fail
2.0
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
2.7
Fail
2.3
Fail
1.8
Fail
1.3
Fail
—
White BG
2.2Fail
2.5Fail
3.3AA Large
4.4AA Large
5.9AA
Black BG
9.6AAA
8.3AAA
6.4AA
4.7AA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C77E
BFBE6F
A6A664
868566
575870

Deuteranopia

CBD081
C4CB71
ABB165
888B67
56536F

Tritanopia

E28688
E27678
C6696A
966869
4C6E6E

Achromatopsia

B0B0B0
A3A3A3
8D8D8D
797979
616161

Shades & Tints Shades & Tints

#E5A073

Dark
Light

#E68C66

Dark
Light

#CA785D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e5a073;
  --color-2: #e68c66;
  --color-3: #ca785d;
  --color-4: #986e64;
  --color-5: #4a6972;
}

SCSS

$color-1: #e5a073;
$color-2: #e68c66;
$color-3: #ca785d;
$color-4: #986e64;
$color-5: #4a6972;

TAILWIND

colors: {
  'brand-1': '#e5a073',
  'brand-2': '#e68c66',
  'brand-3': '#ca785d',
  'brand-4': '#986e64',
  'brand-5': '#4a6972',
}

RGB Array

[229, 160, 115], [230, 140, 102], [202, 120, 93], [152, 110, 100], [74, 105, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #E5A073, #E68C66, #CA785D, #986E64, #4A6972 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: #e5a073; --color-2: #e68c66; --color-3: #ca785d; --color-4: #986e64; --color-5: #4a6972. 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