← Back to Editor

#FBCC56 · #FBA946 · #F98F45 · #C04548 · #4A2C48

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

#FBCC56

Ginger · SandyBrown · Sunflower

HEX
#FBCC56
RGB
rgb(251, 204, 86)
HSL
hsl(43, 95%, 66%)
HSB
hsb(43, 66%, 98%)
CMYK
cmyk(0%, 19%, 66%, 2%)
Oklch
oklch(86.5% 0.143 87.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#FBA946

Ginger · SandyBrown · Warm Sun

HEX
#FBA946
RGB
rgb(251, 169, 70)
HSL
hsl(33, 96%, 63%)
HSB
hsb(33, 72%, 98%)
CMYK
cmyk(0%, 33%, 72%, 2%)
Oklch
oklch(79.8% 0.147 67.6)

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

#F98F45

Apricot · Coral · Warm Sun

HEX
#F98F45
RGB
rgb(249, 143, 69)
HSL
hsl(25, 94%, 62%)
HSB
hsb(25, 72%, 98%)
CMYK
cmyk(0%, 43%, 72%, 2%)
Oklch
oklch(75.1% 0.155 52.7)

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

#C04548

Crimson · Sienna · Passion Red

HEX
#C04548
RGB
rgb(192, 69, 72)
HSL
hsl(359, 49%, 51%)
HSB
hsb(359, 64%, 75%)
CMYK
cmyk(0%, 64%, 63%, 25%)
Oklch
oklch(56.1% 0.158 22.4)

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

#4A2C48

Rose Purple · DarkSlateGray · Eggplant

HEX
#4A2C48
RGB
rgb(74, 44, 72)
HSL
hsl(304, 25%, 23%)
HSB
hsb(304, 41%, 29%)
CMYK
cmyk(0%, 41%, 3%, 71%)
Oklch
oklch(34.2% 0.062 329.2)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBCC56
5685FB

Analogous

FB7A56
FBCC56
D7FB56

Triadic

FBCC56
56FBCC
CC56FB

Split-Comp.

FBCC56
56D7FB
7A56FB

Tetradic

FBCC56
56FB7A
5685FB
FB56D7

Contrast Matrix WCAG 2.1 Contrast

FBCC56
FBA946
F98F45
C04548
4A2C48
—
1.3
Fail
1.5
Fail
3.3
AA Large
8.0
AAA
1.3
Fail
—
1.2
Fail
2.6
Fail
6.2
AA
1.5
Fail
1.2
Fail
—
2.2
Fail
5.2
AA
3.3
AA Large
2.6
Fail
2.2
Fail
—
2.4
Fail
8.0
AAA
6.2
AA
5.2
AA
2.4
Fail
—
White BG
1.5Fail
1.9Fail
2.3Fail
5.0AA
12.0AAA
Black BG
13.9AAA
10.9AAA
9.0AAA
4.2AA Large
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E673
D7D75E
CBCA57
8B8A47
3D3D41

Deuteranopia

E9ED79
DCE264
D1D95B
929B47
3F4140

Tritanopia

F9898E
F77175
F46568
BA4747
493C3B

Achromatopsia

CDCDCD
B6B6B6
A6A6A6
6A6A6A
383838

Shades & Tints Shades & Tints

#FBCC56

Dark
Light

#FBA946

Dark
Light

#F98F45

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbcc56;
  --color-2: #fba946;
  --color-3: #f98f45;
  --color-4: #c04548;
  --color-5: #4a2c48;
}

SCSS

$color-1: #fbcc56;
$color-2: #fba946;
$color-3: #f98f45;
$color-4: #c04548;
$color-5: #4a2c48;

TAILWIND

colors: {
  'brand-1': '#fbcc56',
  'brand-2': '#fba946',
  'brand-3': '#f98f45',
  'brand-4': '#c04548',
  'brand-5': '#4a2c48',
}

RGB Array

[251, 204, 86], [251, 169, 70], [249, 143, 69], [192, 69, 72], [74, 44, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #FBCC56, #FBA946, #F98F45, #C04548, #4A2C48 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: #fbcc56; --color-2: #fba946; --color-3: #f98f45; --color-4: #c04548; --color-5: #4a2c48. 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