← Back to Editor

#F03355 · #BD3951 · #BD4F39 · #BD8A39 · #F0A732

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

#F03355

Vermilion · Crimson · Passion Red

HEX
#F03355
RGB
rgb(240, 51, 85)
HSL
hsl(349, 86%, 57%)
HSB
hsb(349, 79%, 94%)
CMYK
cmyk(0%, 79%, 65%, 6%)
Oklch
oklch(62.7% 0.221 17.3)

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

#BD3951

Crimson · Brown · Passion Red

HEX
#BD3951
RGB
rgb(189, 57, 81)
HSL
hsl(349, 54%, 48%)
HSB
hsb(349, 70%, 74%)
CMYK
cmyk(0%, 70%, 57%, 26%)
Oklch
oklch(54.5% 0.168 14.3)

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

#BD4F39

Crimson · Sienna · Passion Red

HEX
#BD4F39
RGB
rgb(189, 79, 57)
HSL
hsl(10, 54%, 48%)
HSB
hsb(10, 70%, 74%)
CMYK
cmyk(0%, 58%, 70%, 26%)
Oklch
oklch(56.7% 0.147 33.1)

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

#BD8A39

Ochre · DarkGoldenRod · Amber Brown

HEX
#BD8A39
RGB
rgb(189, 138, 57)
HSL
hsl(37, 54%, 48%)
HSB
hsb(37, 70%, 74%)
CMYK
cmyk(0%, 27%, 70%, 26%)
Oklch
oklch(66.8% 0.115 75.8)

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

#F0A732

Ginger · GoldenRod · Warm Sun

HEX
#F0A732
RGB
rgb(240, 167, 50)
HSL
hsl(37, 86%, 57%)
HSB
hsb(37, 79%, 94%)
CMYK
cmyk(0%, 30%, 79%, 6%)
Oklch
oklch(78.1% 0.150 73.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F03355
33F0CD

Analogous

F033B4
F03355
F06F33

Triadic

F03355
56F033
3356F0

Split-Comp.

F03355
33F06F
33B4F0

Tetradic

F03355
B4F033
33F0CD
6F33F0

Contrast Matrix WCAG 2.1 Contrast

F03355
BD3951
BD4F39
BD8A39
F0A732
—
1.4
Fail
1.2
Fail
1.3
Fail
1.9
Fail
1.4
Fail
—
1.1
Fail
1.8
Fail
2.7
Fail
1.2
Fail
1.1
Fail
—
1.6
Fail
2.4
Fail
1.3
Fail
1.8
Fail
1.6
Fail
—
1.5
Fail
1.9
Fail
2.7
Fail
2.4
Fail
1.5
Fail
—
White BG
4.0AA Large
5.4AA
4.8AA
3.1AA Large
2.0Fail
Black BG
5.3AA
3.9AA Large
4.3AA Large
6.9AA
10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9C4D
84834B
8D8C3E
A7A64D
D0D04E

Deuteranopia

A9B74B
8C954A
949C40
AAAE51
D5DA55

Tritanopia

E74645
B64746
B74343
BA5C5F
EC656A

Achromatopsia

6F6F6F
636363
6D6D6D
909090
AFAFAF

Shades & Tints Shades & Tints

#F03355

Dark
Light

#BD3951

Dark
Light

#BD4F39

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f03355;
  --color-2: #bd3951;
  --color-3: #bd4f39;
  --color-4: #bd8a39;
  --color-5: #f0a732;
}

SCSS

$color-1: #f03355;
$color-2: #bd3951;
$color-3: #bd4f39;
$color-4: #bd8a39;
$color-5: #f0a732;

TAILWIND

colors: {
  'brand-1': '#f03355',
  'brand-2': '#bd3951',
  'brand-3': '#bd4f39',
  'brand-4': '#bd8a39',
  'brand-5': '#f0a732',
}

RGB Array

[240, 51, 85], [189, 57, 81], [189, 79, 57], [189, 138, 57], [240, 167, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F03355, #BD3951, #BD4F39, #BD8A39, #F0A732 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: #f03355; --color-2: #bd3951; --color-3: #bd4f39; --color-4: #bd8a39; --color-5: #f0a732. 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