← Back to Editor

#F8B157 · #D15438 · #98272B · #5C1418 · #29040B

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 AppData Visualization

Color Details Color Details

#F8B157

Ginger · SandyBrown · Warm Sun

HEX
#F8B157
RGB
rgb(248, 177, 87)
HSL
hsl(34, 92%, 66%)
HSB
hsb(34, 65%, 97%)
CMYK
cmyk(0%, 29%, 65%, 3%)
Oklch
oklch(81.1% 0.134 70.3)

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

#D15438

Vermilion · Chocolate · Passion Red

HEX
#D15438
RGB
rgb(209, 84, 56)
HSL
hsl(11, 62%, 52%)
HSB
hsb(11, 73%, 82%)
CMYK
cmyk(0%, 60%, 73%, 18%)
Oklch
oklch(60.5% 0.164 34.1)

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

#98272B

Crimson · Brown · Wine Red

HEX
#98272B
RGB
rgb(152, 39, 43)
HSL
hsl(358, 59%, 37%)
HSB
hsb(358, 74%, 60%)
CMYK
cmyk(0%, 74%, 72%, 40%)
Oklch
oklch(45.4% 0.149 23.6)

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

#5C1418

Vermilion · Maroon · Wine Red

HEX
#5C1418
RGB
rgb(92, 20, 24)
HSL
hsl(357, 64%, 22%)
HSB
hsb(357, 78%, 36%)
CMYK
cmyk(0%, 78%, 74%, 64%)
Oklch
oklch(31.8% 0.104 22.5)

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

#29040B

Vermilion · Black · Deep Berry

HEX
#29040B
RGB
rgb(41, 4, 11)
HSL
hsl(349, 82%, 9%)
HSB
hsb(349, 90%, 16%)
CMYK
cmyk(0%, 90%, 73%, 84%)
Oklch
oklch(18.8% 0.063 13.2)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8B157
599EF8

Analogous

F86359
F8B157
EDF859

Triadic

F8B157
59F8B3
B359F8

Split-Comp.

F8B157
59EDF8
6359F8

Tetradic

F8B157
59F863
599EF8
F859ED

Contrast Matrix WCAG 2.1 Contrast

F8B157
D15438
98272B
5C1418
29040B
—
2.3
Fail
4.3
AA Large
7.3
AAA
10.2
AAA
2.3
Fail
—
1.9
Fail
3.2
AA Large
4.5
AA
4.3
AA Large
1.9
Fail
—
1.7
Fail
2.4
Fail
7.3
AAA
3.2
AA Large
1.7
Fail
—
1.4
Fail
10.2
AAA
4.5
AA
2.4
Fail
1.4
Fail
—
White BG
1.8Fail
4.2AA Large
7.9AAA
13.4AAA
18.8AAA
Black BG
11.4AAA
5.0AA
2.7Fail
1.6Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D96D
9B9A3F
67662A
3D3C17
191909

Deuteranopia

DDE372
A2AB40
6E762A
414617
1B1E09

Tritanopia

F47E82
CB4445
922929
581616
270808

Achromatopsia

BCBCBC
767676
494949
2A2A2A
101010

Shades & Tints Shades & Tints

#F8B157

Dark
Light

#D15438

Dark
Light

#98272B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8b157;
  --color-2: #d15438;
  --color-3: #98272b;
  --color-4: #5c1418;
  --color-5: #29040b;
}

SCSS

$color-1: #f8b157;
$color-2: #d15438;
$color-3: #98272b;
$color-4: #5c1418;
$color-5: #29040b;

TAILWIND

colors: {
  'brand-1': '#f8b157',
  'brand-2': '#d15438',
  'brand-3': '#98272b',
  'brand-4': '#5c1418',
  'brand-5': '#29040b',
}

RGB Array

[248, 177, 87], [209, 84, 56], [152, 39, 43], [92, 20, 24], [41, 4, 11]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #F8B157, #D15438, #98272B, #5C1418, #29040B is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #f8b157; --color-2: #d15438; --color-3: #98272b; --color-4: #5c1418; --color-5: #29040b. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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