← Back to Editor

#F06103 · #FBE65E · #FFB04A · #B1B203 · #A34D14

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

#F06103

Tangerine · OrangeRed · Amber Brown

HEX
#F06103
RGB
rgb(240, 97, 3)
HSL
hsl(24, 98%, 48%)
HSB
hsb(24, 99%, 94%)
CMYK
cmyk(0%, 60%, 99%, 6%)
Oklch
oklch(66.7% 0.194 43.8)

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

#FBE65E

Fresh Green · Khaki · Sunflower

HEX
#FBE65E
RGB
rgb(251, 230, 94)
HSL
hsl(52, 95%, 68%)
HSB
hsb(52, 63%, 98%)
CMYK
cmyk(0%, 8%, 63%, 2%)
Oklch
oklch(91.7% 0.155 100.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#FFB04A

Ginger · SandyBrown · Warm Sun

HEX
#FFB04A
RGB
rgb(255, 176, 74)
HSL
hsl(34, 100%, 65%)
HSB
hsb(34, 71%, 100%)
CMYK
cmyk(0%, 31%, 71%, 0%)
Oklch
oklch(81.6% 0.147 69.7)

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

#B1B203

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#B1B203
RGB
rgb(177, 178, 3)
HSL
hsl(60, 97%, 35%)
HSB
hsb(60, 98%, 70%)
CMYK
cmyk(1%, 0%, 98%, 30%)
Oklch
oklch(73.8% 0.161 110.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#A34D14

Tangerine · Sienna · Amber Brown

HEX
#A34D14
RGB
rgb(163, 77, 20)
HSL
hsl(24, 78%, 36%)
HSB
hsb(24, 88%, 64%)
CMYK
cmyk(0%, 53%, 88%, 36%)
Oklch
oklch(52.1% 0.131 48.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F06103
0292F2

Analogous

F2021A
F06103
F2DA02

Triadic

F06103
02F262
6202F2

Split-Comp.

F06103
02F2DA
021AF2

Tetradic

F06103
1AF202
0292F2
DA02F2

Contrast Matrix WCAG 2.1 Contrast

F06103
FBE65E
FFB04A
B1B203
A34D14
—
2.6
Fail
1.8
Fail
1.4
Fail
1.8
Fail
2.6
Fail
—
1.4
Fail
1.8
Fail
4.6
AA
1.8
Fail
1.4
Fail
—
1.3
Fail
3.2
AA Large
1.4
Fail
1.8
Fail
1.3
Fail
—
2.5
Fail
1.8
Fail
4.6
AA
3.2
AA Large
2.5
Fail
—
White BG
3.3AA Large
1.3Fail
1.8Fail
2.3Fail
5.8AA
Black BG
6.4AA
16.6AAA
11.6AAA
9.2AAA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B11A
F2F27F
DDDC63
B1B12D
7E7D22

Deuteranopia

BAC51F
F3F587
E1E769
B1B138
838925

Tritanopia

E92C30
FA999F
FB767A
B14F56
9F2D2F

Achromatopsia

818181
DDDDDD
BCBCBC
9E9E9E
606060

Shades & Tints Shades & Tints

#F06103

Dark
Light

#FBE65E

Dark
Light

#FFB04A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f06103;
  --color-2: #fbe65e;
  --color-3: #ffb04a;
  --color-4: #b1b203;
  --color-5: #a34d14;
}

SCSS

$color-1: #f06103;
$color-2: #fbe65e;
$color-3: #ffb04a;
$color-4: #b1b203;
$color-5: #a34d14;

TAILWIND

colors: {
  'brand-1': '#f06103',
  'brand-2': '#fbe65e',
  'brand-3': '#ffb04a',
  'brand-4': '#b1b203',
  'brand-5': '#a34d14',
}

RGB Array

[240, 97, 3], [251, 230, 94], [255, 176, 74], [177, 178, 3], [163, 77, 20]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #F06103, #FBE65E, #FFB04A, #B1B203, #A34D14 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: #f06103; --color-2: #fbe65e; --color-3: #ffb04a; --color-4: #b1b203; --color-5: #a34d14. 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