← Back to Editor

#F3DEBD · #F5AA1A · #E87801 · #F13C0D · #8566A1

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#F3DEBD

Goose Yellow · Wheat · Peach Orange

HEX
#F3DEBD
RGB
rgb(243, 222, 189)
HSL
hsl(37, 69%, 85%)
HSB
hsb(37, 22%, 95%)
CMYK
cmyk(0%, 9%, 22%, 5%)
Oklch
oklch(90.9% 0.049 79.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F5AA1A

Ginger · GoldenRod · Warm Sun

HEX
#F5AA1A
RGB
rgb(245, 170, 26)
HSL
hsl(39, 92%, 53%)
HSB
hsb(39, 89%, 96%)
CMYK
cmyk(0%, 31%, 89%, 4%)
Oklch
oklch(79.1% 0.161 75.9)

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

#E87801

Ochre · Chocolate · Amber Brown

HEX
#E87801
RGB
rgb(232, 120, 1)
HSL
hsl(31, 99%, 46%)
HSB
hsb(31, 100%, 91%)
CMYK
cmyk(0%, 48%, 100%, 9%)
Oklch
oklch(68.8% 0.170 54.9)

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

#F13C0D

Vermilion · OrangeRed · Passion Red

HEX
#F13C0D
RGB
rgb(241, 60, 13)
HSL
hsl(12, 90%, 50%)
HSB
hsb(12, 95%, 95%)
CMYK
cmyk(0%, 75%, 95%, 5%)
Oklch
oklch(62.9% 0.222 33.7)

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

#8566A1

Dark Plum · SlateGray · Violet

HEX
#8566A1
RGB
rgb(133, 102, 161)
HSL
hsl(272, 24%, 52%)
HSB
hsb(272, 37%, 63%)
CMYK
cmyk(17%, 37%, 0%, 37%)
Oklch
oklch(56.4% 0.095 307.7)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3DEBD
BED3F3

Analogous

F3C5BE
F3DEBD
EDF3BE

Triadic

F3DEBD
BEF3DF
DFBEF3

Split-Comp.

F3DEBD
BEEDF3
C5BEF3

Tetradic

F3DEBD
BEF3C5
BED3F3
F3BEED

Contrast Matrix WCAG 2.1 Contrast

F3DEBD
F5AA1A
E87801
F13C0D
8566A1
—
1.5
Fail
2.2
Fail
3.0
Fail
3.6
AA Large
1.5
Fail
—
1.5
Fail
2.0
Fail
2.4
Fail
2.2
Fail
1.5
Fail
—
1.3
Fail
1.6
Fail
3.0
Fail
2.0
Fail
1.3
Fail
—
1.2
Fail
3.6
AA Large
2.4
Fail
1.6
Fail
1.2
Fail
—
White BG
1.3Fail
2.0Fail
3.0Fail
3.9AA Large
4.8AA
Black BG
16.0AAA
10.6AAA
7.1AAA
5.4AA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAC5
D5D43D
B8B61E
A3A118
787793

Deuteranopia

EBEDC7
D9DF45
BEC625
ADBB1B
797C8F

Tritanopia

F2CBCD
F1585E
E2353A
E82123
838785

Achromatopsia

E1E1E1
B0B0B0
8C8C8C
6D6D6D
767676

Shades & Tints Shades & Tints

#F3DEBD

Dark
Light

#F5AA1A

Dark
Light

#E87801

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3debd;
  --color-2: #f5aa1a;
  --color-3: #e87801;
  --color-4: #f13c0d;
  --color-5: #8566a1;
}

SCSS

$color-1: #f3debd;
$color-2: #f5aa1a;
$color-3: #e87801;
$color-4: #f13c0d;
$color-5: #8566a1;

TAILWIND

colors: {
  'brand-1': '#f3debd',
  'brand-2': '#f5aa1a',
  'brand-3': '#e87801',
  'brand-4': '#f13c0d',
  'brand-5': '#8566a1',
}

RGB Array

[243, 222, 189], [245, 170, 26], [232, 120, 1], [241, 60, 13], [133, 102, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #F3DEBD, #F5AA1A, #E87801, #F13C0D, #8566A1 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #f3debd; --color-2: #f5aa1a; --color-3: #e87801; --color-4: #f13c0d; --color-5: #8566a1. 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 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