← Back to Editor

#FEC550 · #F4971B · #E65839 · #D42319 · #722131

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 App

Color Details Color Details

#FEC550

Ginger · SandyBrown · Sunflower

HEX
#FEC550
RGB
rgb(254, 197, 80)
HSL
hsl(40, 99%, 65%)
HSB
hsb(40, 69%, 100%)
CMYK
cmyk(0%, 22%, 69%, 0%)
Oklch
oklch(85.4% 0.146 82.3)

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

#F4971B

Ginger · GoldenRod · Warm Sun

HEX
#F4971B
RGB
rgb(244, 151, 27)
HSL
hsl(34, 91%, 53%)
HSB
hsb(34, 89%, 96%)
CMYK
cmyk(0%, 38%, 89%, 4%)
Oklch
oklch(75.6% 0.163 65.6)

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

#E65839

Vermilion · Tomato · Passion Red

HEX
#E65839
RGB
rgb(230, 88, 57)
HSL
hsl(11, 78%, 56%)
HSB
hsb(11, 75%, 90%)
CMYK
cmyk(0%, 62%, 75%, 10%)
Oklch
oklch(64.3% 0.183 33.9)

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

#D42319

Vermilion · FireBrick · Passion Red

HEX
#D42319
RGB
rgb(212, 35, 25)
HSL
hsl(3, 79%, 46%)
HSB
hsb(3, 88%, 83%)
CMYK
cmyk(0%, 83%, 88%, 17%)
Oklch
oklch(56.0% 0.211 29.2)

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

#722131

Crimson · Brown · Wine Red

HEX
#722131
RGB
rgb(114, 33, 49)
HSL
hsl(348, 55%, 29%)
HSB
hsb(348, 71%, 45%)
CMYK
cmyk(0%, 71%, 57%, 55%)
Oklch
oklch(38.0% 0.113 12.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FEC550
4D88FE

Analogous

FE6B4D
FEC550
E1FE4D

Triadic

FEC550
4DFEC3
C34DFE

Split-Comp.

FEC550
4DE1FE
6B4DFE

Tetradic

FEC550
4DFE6B
4D88FE
FE4DE1

Contrast Matrix WCAG 2.1 Contrast

FEC550
F4971B
E65839
D42319
722131
—
1.4
Fail
2.3
Fail
3.3
AA Large
6.7
AA
1.4
Fail
—
1.6
Fail
2.3
Fail
4.7
AA
2.3
Fail
1.6
Fail
—
1.4
Fail
2.9
Fail
3.3
AA Large
2.3
Fail
1.4
Fail
—
2.1
Fail
6.7
AA
4.7
AA
2.9
Fail
2.1
Fail
—
White BG
1.6Fail
2.3Fail
3.6AA Large
5.2AA
10.6AAA
Black BG
13.3AAA
9.3AAA
5.8AA
4.1AA Large
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E56C
CCCB39
A9A741
87861B
4F4E2D

Deuteranopia

E9ED73
D1D840
B1BB42
929F1C
545A2C

Tritanopia

FB8388
EF5156
DF4648
CB1D1E
6E2A29

Achromatopsia

C9C9C9
A5A5A5
7F7F7F
575757
3B3B3B

Shades & Tints Shades & Tints

#FEC550

Dark
Light

#F4971B

Dark
Light

#E65839

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fec550;
  --color-2: #f4971b;
  --color-3: #e65839;
  --color-4: #d42319;
  --color-5: #722131;
}

SCSS

$color-1: #fec550;
$color-2: #f4971b;
$color-3: #e65839;
$color-4: #d42319;
$color-5: #722131;

TAILWIND

colors: {
  'brand-1': '#fec550',
  'brand-2': '#f4971b',
  'brand-3': '#e65839',
  'brand-4': '#d42319',
  'brand-5': '#722131',
}

RGB Array

[254, 197, 80], [244, 151, 27], [230, 88, 57], [212, 35, 25], [114, 33, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FEC550, #F4971B, #E65839, #D42319, #722131 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: #fec550; --color-2: #f4971b; --color-3: #e65839; --color-4: #d42319; --color-5: #722131. 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 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