← Back to Editor

#F8E4A7 · #EDA666 · #E5785B · #1A3F38 · #62AB97

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F8E4A7

Goose Yellow · Wheat · Lemon Cream

HEX
#F8E4A7
RGB
rgb(248, 228, 167)
HSL
hsl(45, 85%, 81%)
HSB
hsb(45, 33%, 97%)
CMYK
cmyk(0%, 8%, 33%, 3%)
Oklch
oklch(92.1% 0.081 92.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#EDA666

Apricot · SandyBrown · Warm Sun

HEX
#EDA666
RGB
rgb(237, 166, 102)
HSL
hsl(28, 79%, 66%)
HSB
hsb(28, 57%, 93%)
CMYK
cmyk(0%, 30%, 57%, 7%)
Oklch
oklch(78.1% 0.116 61.8)

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

#E5785B

Peach Pink · Coral · Coral Red

HEX
#E5785B
RGB
rgb(229, 120, 91)
HSL
hsl(13, 73%, 63%)
HSB
hsb(13, 60%, 90%)
CMYK
cmyk(0%, 48%, 60%, 10%)
Oklch
oklch(69.1% 0.142 35.9)

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

#1A3F38

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#1A3F38
RGB
rgb(26, 63, 56)
HSL
hsl(169, 42%, 17%)
HSB
hsb(169, 59%, 25%)
CMYK
cmyk(59%, 0%, 11%, 75%)
Oklch
oklch(33.8% 0.044 179.4)

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

#62AB97

Mineral Blue · CadetBlue · Lake Green

HEX
#62AB97
RGB
rgb(98, 171, 151)
HSL
hsl(164, 30%, 53%)
HSB
hsb(164, 43%, 67%)
CMYK
cmyk(43%, 0%, 12%, 33%)
Oklch
oklch(68.8% 0.080 174.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8E4A7
A5BAF8

Analogous

F8BAA5
F8E4A7
E3F8A5

Triadic

F8E4A7
A5F8E3
E3A5F8

Split-Comp.

F8E4A7
A5E3F8
BAA5F8

Tetradic

F8E4A7
A5F8BA
A5BAF8
F8A5E3

Contrast Matrix WCAG 2.1 Contrast

F8E4A7
EDA666
E5785B
1A3F38
62AB97
—
1.6
Fail
2.3
Fail
9.2
AAA
2.1
Fail
1.6
Fail
—
1.4
Fail
5.7
AA
1.3
Fail
2.3
Fail
1.4
Fail
—
4.0
AA Large
1.1
Fail
9.2
AAA
5.7
AA
4.0
AA Large
—
4.3
AA Large
2.1
Fail
1.3
Fail
1.1
Fail
4.3
AA Large
—
White BG
1.3Fail
2.0Fail
2.9Fail
11.6AAA
2.7Fail
Black BG
16.6AAA
10.2AAA
7.2AAA
1.8Fail
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFB6
CECE75
B6B562
2A2A3A
82829C

Deuteranopia

F1F2B9
D2D879
BCC464
28253A
7D789D

Tritanopia

F7C1C4
E98284
E06869
1C3B3B
66A0A1

Achromatopsia

E3E3E3
B4B4B4
959595
333333
939393

Shades & Tints Shades & Tints

#F8E4A7

Dark
Light

#EDA666

Dark
Light

#E5785B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8e4a7;
  --color-2: #eda666;
  --color-3: #e5785b;
  --color-4: #1a3f38;
  --color-5: #62ab97;
}

SCSS

$color-1: #f8e4a7;
$color-2: #eda666;
$color-3: #e5785b;
$color-4: #1a3f38;
$color-5: #62ab97;

TAILWIND

colors: {
  'brand-1': '#f8e4a7',
  'brand-2': '#eda666',
  'brand-3': '#e5785b',
  'brand-4': '#1a3f38',
  'brand-5': '#62ab97',
}

RGB Array

[248, 228, 167], [237, 166, 102], [229, 120, 91], [26, 63, 56], [98, 171, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #F8E4A7, #EDA666, #E5785B, #1A3F38, #62AB97 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f8e4a7; --color-2: #eda666; --color-3: #e5785b; --color-4: #1a3f38; --color-5: #62ab97. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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