← Back to Editor

#F20F00 · #FF942B · #FFE13A · #FFFDC5 · #090408

warm

A 5-color warm 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

#F20F00

Vermilion · Red · Passion Red

HEX
#F20F00
RGB
rgb(242, 15, 0)
HSL
hsl(4, 100%, 47%)
HSB
hsb(4, 100%, 95%)
CMYK
cmyk(0%, 94%, 100%, 5%)
Oklch
oklch(60.7% 0.245 29.8)

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

#FF942B

Ginger · GoldenRod · Warm Sun

HEX
#FF942B
RGB
rgb(255, 148, 43)
HSL
hsl(30, 100%, 58%)
HSB
hsb(30, 83%, 100%)
CMYK
cmyk(0%, 42%, 83%, 0%)
Oklch
oklch(76.5% 0.168 58.8)

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

#FFE13A

Fresh Green · Gold · Sunflower

HEX
#FFE13A
RGB
rgb(255, 225, 58)
HSL
hsl(51, 100%, 61%)
HSB
hsb(51, 77%, 100%)
CMYK
cmyk(0%, 12%, 77%, 0%)
Oklch
oklch(90.8% 0.173 98.4)

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

#FFFDC5

Fresh Green · Bisque · Lemon Cream

HEX
#FFFDC5
RGB
rgb(255, 253, 197)
HSL
hsl(58, 100%, 89%)
HSB
hsb(58, 23%, 100%)
CMYK
cmyk(0%, 1%, 23%, 0%)
Oklch
oklch(98.2% 0.072 105.9)

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

#090408

Rose Purple · Black · Dark Purple

HEX
#090408
RGB
rgb(9, 4, 8)
HSL
hsl(312, 38%, 3%)
HSB
hsb(312, 56%, 4%)
CMYK
cmyk(0%, 56%, 11%, 96%)
Oklch
oklch(12.0% 0.017 332.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F20F00
00E0F0

Analogous

F00068
F20F00
F08800

Triadic

F20F00
00F010
1000F0

Split-Comp.

F20F00
00F088
0068F0

Tetradic

F20F00
68F000
00E0F0
8800F0

Contrast Matrix WCAG 2.1 Contrast

F20F00
FF942B
FFE13A
FFFDC5
090408
—
2.0
Fail
3.3
AA Large
4.2
AA Large
4.7
AA
2.0
Fail
—
1.7
Fail
2.1
Fail
9.2
AAA
3.3
AA Large
1.7
Fail
—
1.3
Fail
15.6
AAA
4.2
AA Large
2.1
Fail
1.3
Fail
—
19.5
AAA
4.7
AA
9.2
AAA
15.6
AAA
19.5
AAA
—
White BG
4.3AA Large
2.2Fail
1.3Fail
1.0Fail
20.3AAA
Black BG
4.8AA
9.5AAA
16.1AAA
20.1AAA
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

908E04
D1D044
F2F262
FEFED3
070707

Deuteranopia

9DAE05
D7DF4B
F4F66C
FEFED6
070807

Tritanopia

E70607
FA585D
FE8289
FFDDE0
090606

Achromatopsia

515151
A8A8A8
D7D7D7
F7F7F7
060606

Shades & Tints Shades & Tints

#F20F00

Dark
Light

#FF942B

Dark
Light

#FFE13A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f20f00;
  --color-2: #ff942b;
  --color-3: #ffe13a;
  --color-4: #fffdc5;
  --color-5: #090408;
}

SCSS

$color-1: #f20f00;
$color-2: #ff942b;
$color-3: #ffe13a;
$color-4: #fffdc5;
$color-5: #090408;

TAILWIND

colors: {
  'brand-1': '#f20f00',
  'brand-2': '#ff942b',
  'brand-3': '#ffe13a',
  'brand-4': '#fffdc5',
  'brand-5': '#090408',
}

RGB Array

[242, 15, 0], [255, 148, 43], [255, 225, 58], [255, 253, 197], [9, 4, 8]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F20F00, #FF942B, #FFE13A, #FFFDC5, #090408 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: #f20f00; --color-2: #ff942b; --color-3: #ffe13a; --color-4: #fffdc5; --color-5: #090408. 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 warm-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