← Back to Editor

#FD5039 · #FD7303 · #FD9D4F · #FDE181 · #FD4403

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

#FD5039

Peach Pink · Tomato · Coral Red

HEX
#FD5039
RGB
rgb(253, 80, 57)
HSL
hsl(7, 98%, 61%)
HSB
hsb(7, 77%, 99%)
CMYK
cmyk(0%, 68%, 77%, 1%)
Oklch
oklch(67.0% 0.213 30.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FD7303

Tangerine · OrangeRed · Amber Brown

HEX
#FD7303
RGB
rgb(253, 115, 3)
HSL
hsl(27, 98%, 50%)
HSB
hsb(27, 99%, 99%)
CMYK
cmyk(0%, 55%, 99%, 1%)
Oklch
oklch(71.0% 0.192 48.1)

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

#FD9D4F

Apricot · SandyBrown · Warm Sun

HEX
#FD9D4F
RGB
rgb(253, 157, 79)
HSL
hsl(27, 98%, 65%)
HSB
hsb(27, 69%, 99%)
CMYK
cmyk(0%, 38%, 69%, 1%)
Oklch
oklch(78.0% 0.147 57.2)

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

#FDE181

Goose Yellow · Khaki · Sunflower

HEX
#FDE181
RGB
rgb(253, 225, 129)
HSL
hsl(46, 97%, 75%)
HSB
hsb(46, 49%, 99%)
CMYK
cmyk(0%, 11%, 49%, 1%)
Oklch
oklch(91.3% 0.120 93.6)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#FD4403

Tangerine · OrangeRed · Amber Brown

HEX
#FD4403
RGB
rgb(253, 68, 3)
HSL
hsl(16, 98%, 50%)
HSB
hsb(16, 99%, 99%)
CMYK
cmyk(0%, 73%, 99%, 1%)
Oklch
oklch(65.6% 0.228 35.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD5039
3AE6FD

Analogous

FD3A85
FD5039
FDB23A

Triadic

FD5039
3AFD51
513AFD

Split-Comp.

FD5039
3AFDB2
3A85FD

Tetradic

FD5039
85FD3A
3AE6FD
B23AFD

Contrast Matrix WCAG 2.1 Contrast

FD5039
FD7303
FD9D4F
FDE181
FD4403
—
1.2
Fail
1.6
Fail
2.5
Fail
1.1
Fail
1.2
Fail
—
1.3
Fail
2.1
Fail
1.3
Fail
1.6
Fail
1.3
Fail
—
1.6
Fail
1.7
Fail
2.5
Fail
2.1
Fail
1.6
Fail
—
2.7
Fail
1.1
Fail
1.3
Fail
1.7
Fail
2.7
Fail
—
White BG
3.3AA Large
2.8Fail
2.1Fail
1.3Fail
3.5AA Large
Black BG
6.4AA
7.6AAA
10.1AAA
16.3AAA
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B13F
C1C01E
D3D362
F1F198
ADAB13

Deuteranopia

BCC940
C9D425
D9E066
F3F59E
B8C617

Tritanopia

F44344
F63338
F87174
FCABAF
F41F22

Achromatopsia

818181
8F8F8F
B1B1B1
DEDEDE
747474

Shades & Tints Shades & Tints

#FD5039

Dark
Light

#FD7303

Dark
Light

#FD9D4F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd5039;
  --color-2: #fd7303;
  --color-3: #fd9d4f;
  --color-4: #fde181;
  --color-5: #fd4403;
}

SCSS

$color-1: #fd5039;
$color-2: #fd7303;
$color-3: #fd9d4f;
$color-4: #fde181;
$color-5: #fd4403;

TAILWIND

colors: {
  'brand-1': '#fd5039',
  'brand-2': '#fd7303',
  'brand-3': '#fd9d4f',
  'brand-4': '#fde181',
  'brand-5': '#fd4403',
}

RGB Array

[253, 80, 57], [253, 115, 3], [253, 157, 79], [253, 225, 129], [253, 68, 3]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FD5039, #FD7303, #FD9D4F, #FDE181, #FD4403 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: #fd5039; --color-2: #fd7303; --color-3: #fd9d4f; --color-4: #fde181; --color-5: #fd4403. 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