← Back to Editor

#EDA864 · #ED8664 · #ED6464 · #A06963 · #546E63

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

#EDA864

Ginger · SandyBrown · Warm Sun

HEX
#EDA864
RGB
rgb(237, 168, 100)
HSL
hsl(30, 79%, 66%)
HSB
hsb(30, 58%, 93%)
CMYK
cmyk(0%, 29%, 58%, 7%)
Oklch
oklch(78.4% 0.118 64.2)

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

#ED8664

Apricot · Salmon · Warm Sun

HEX
#ED8664
RGB
rgb(237, 134, 100)
HSL
hsl(15, 79%, 66%)
HSB
hsb(15, 58%, 93%)
CMYK
cmyk(0%, 43%, 58%, 7%)
Oklch
oklch(72.5% 0.135 39.0)

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

#ED6464

Peach Pink · Salmon · Coral Red

HEX
#ED6464
RGB
rgb(237, 100, 100)
HSL
hsl(0, 79%, 66%)
HSB
hsb(0, 58%, 93%)
CMYK
cmyk(0%, 58%, 58%, 7%)
Oklch
oklch(67.5% 0.170 22.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#A06963

Crimson · Gray · Passion Red

HEX
#A06963
RGB
rgb(160, 105, 99)
HSL
hsl(6, 24%, 51%)
HSB
hsb(6, 38%, 63%)
CMYK
cmyk(0%, 34%, 38%, 37%)
Oklch
oklch(57.8% 0.072 26.4)

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

#546E63

Mineral Blue · DimGray · Forest Green

HEX
#546E63
RGB
rgb(84, 110, 99)
HSL
hsl(155, 13%, 38%)
HSB
hsb(155, 24%, 43%)
CMYK
cmyk(24%, 0%, 10%, 57%)
Oklch
oklch(51.4% 0.035 167.2)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EDA864
64A8ED

Analogous

ED6464
EDA864
EDED64

Triadic

EDA864
64EDA8
A864ED

Split-Comp.

EDA864
64EDED
6464ED

Tetradic

EDA864
64ED64
64A8ED
ED64ED

Contrast Matrix WCAG 2.1 Contrast

EDA864
ED8664
ED6464
A06963
546E63
—
1.3
Fail
1.6
Fail
2.2
Fail
2.7
Fail
1.3
Fail
—
1.2
Fail
1.7
Fail
2.2
Fail
1.6
Fail
1.2
Fail
—
1.4
Fail
1.7
Fail
2.2
Fail
1.7
Fail
1.4
Fail
—
1.2
Fail
2.7
Fail
2.2
Fail
1.7
Fail
1.2
Fail
—
White BG
2.0Fail
2.6Fail
3.2AA Large
4.5AA Large
5.5AA
Black BG
10.4AAA
8.2AAA
6.6AA
4.7AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCF74
C0BF6C
B2B064
888864
5F5F66

Deuteranopia

D3D878
C6CE6E
BAC464
8B9065
5E5C66

Tritanopia

EA8184
E87374
E66464
9D6666
556868

Achromatopsia

B5B5B5
A1A1A1
8D8D8D
797979
656565

Shades & Tints Shades & Tints

#EDA864

Dark
Light

#ED8664

Dark
Light

#ED6464

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #eda864;
  --color-2: #ed8664;
  --color-3: #ed6464;
  --color-4: #a06963;
  --color-5: #546e63;
}

SCSS

$color-1: #eda864;
$color-2: #ed8664;
$color-3: #ed6464;
$color-4: #a06963;
$color-5: #546e63;

TAILWIND

colors: {
  'brand-1': '#eda864',
  'brand-2': '#ed8664',
  'brand-3': '#ed6464',
  'brand-4': '#a06963',
  'brand-5': '#546e63',
}

RGB Array

[237, 168, 100], [237, 134, 100], [237, 100, 100], [160, 105, 99], [84, 110, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #EDA864, #ED8664, #ED6464, #A06963, #546E63 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: #eda864; --color-2: #ed8664; --color-3: #ed6464; --color-4: #a06963; --color-5: #546e63. 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