← Back to Editor

#F0B223 · #D67318 · #7F2318 · #541A26 · #372440

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

#F0B223

Ginger · GoldenRod · Sunflower

HEX
#F0B223
RGB
rgb(240, 178, 35)
HSL
hsl(42, 87%, 54%)
HSB
hsb(42, 85%, 94%)
CMYK
cmyk(0%, 26%, 85%, 6%)
Oklch
oklch(80.0% 0.157 81.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D67318

Tangerine · Chocolate · Amber Brown

HEX
#D67318
RGB
rgb(214, 115, 24)
HSL
hsl(29, 80%, 47%)
HSB
hsb(29, 89%, 84%)
CMYK
cmyk(0%, 46%, 89%, 16%)
Oklch
oklch(65.6% 0.154 55.5)

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

#7F2318

Vermilion · Maroon · Wine Red

HEX
#7F2318
RGB
rgb(127, 35, 24)
HSL
hsl(6, 68%, 30%)
HSB
hsb(6, 81%, 50%)
CMYK
cmyk(0%, 72%, 81%, 50%)
Oklch
oklch(40.2% 0.128 30.3)

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

#541A26

Crimson · Maroon · Wine Red

HEX
#541A26
RGB
rgb(84, 26, 38)
HSL
hsl(348, 53%, 22%)
HSB
hsb(348, 69%, 33%)
CMYK
cmyk(0%, 69%, 55%, 67%)
Oklch
oklch(31.3% 0.087 11.1)

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

#372440

Dark Plum · DarkSlateGray · Dark Purple

HEX
#372440
RGB
rgb(55, 36, 64)
HSL
hsl(281, 28%, 20%)
HSB
hsb(281, 44%, 25%)
CMYK
cmyk(14%, 44%, 0%, 75%)
Oklch
oklch(29.6% 0.055 314.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0B223
2461F0

Analogous

F04C24
F0B223
C7F024

Triadic

F0B223
24F0B3
B324F0

Split-Comp.

F0B223
24C7F0
4C24F0

Tetradic

F0B223
24F04C
2461F0
F024C7

Contrast Matrix WCAG 2.1 Contrast

F0B223
D67318
7F2318
541A26
372440
—
1.8
Fail
5.1
AA
7.1
AAA
7.5
AAA
1.8
Fail
—
2.9
Fail
4.1
AA Large
4.2
AA Large
5.1
AA
2.9
Fail
—
1.4
Fail
1.4
Fail
7.1
AAA
4.1
AA Large
1.4
Fail
—
1.0
Fail
7.5
AAA
4.2
AA Large
1.4
Fail
1.0
Fail
—
White BG
1.9Fail
3.3AA Large
9.7AAA
13.5AAA
14.1AAA
Black BG
11.1AAA
6.3AA
2.2Fail
1.6Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D546
ABAA2E
57561B
3B3A23
2F2F39

Deuteranopia

D9DD4E
B1B833
5D631B
3E4322
303138

Tritanopia

ED6167
D13F43
7A1D1D
512120
363433

Achromatopsia

B4B4B4
868686
3D3D3D
2D2D2D
2D2D2D

Shades & Tints Shades & Tints

#F0B223

Dark
Light

#D67318

Dark
Light

#7F2318

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0b223;
  --color-2: #d67318;
  --color-3: #7f2318;
  --color-4: #541a26;
  --color-5: #372440;
}

SCSS

$color-1: #f0b223;
$color-2: #d67318;
$color-3: #7f2318;
$color-4: #541a26;
$color-5: #372440;

TAILWIND

colors: {
  'brand-1': '#f0b223',
  'brand-2': '#d67318',
  'brand-3': '#7f2318',
  'brand-4': '#541a26',
  'brand-5': '#372440',
}

RGB Array

[240, 178, 35], [214, 115, 24], [127, 35, 24], [84, 26, 38], [55, 36, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #F0B223, #D67318, #7F2318, #541A26, #372440 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. 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: #f0b223; --color-2: #d67318; --color-3: #7f2318; --color-4: #541a26; --color-5: #372440. 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. 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