← Back to Editor

#F2CC24 · #FA6305 · #CF0404 · #9F79BA · #1972B5

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#F2CC24

Ginger · Gold · Sunflower

HEX
#F2CC24
RGB
rgb(242, 204, 36)
HSL
hsl(49, 89%, 55%)
HSB
hsb(49, 85%, 95%)
CMYK
cmyk(0%, 16%, 85%, 5%)
Oklch
oklch(85.3% 0.168 94.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#FA6305

Tangerine · OrangeRed · Amber Brown

HEX
#FA6305
RGB
rgb(250, 99, 5)
HSL
hsl(23, 96%, 50%)
HSB
hsb(23, 98%, 98%)
CMYK
cmyk(0%, 60%, 98%, 2%)
Oklch
oklch(68.4% 0.201 43.0)

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

#CF0404

Vermilion · Red · Passion Red

HEX
#CF0404
RGB
rgb(207, 4, 4)
HSL
hsl(0, 96%, 41%)
HSB
hsb(0, 98%, 81%)
CMYK
cmyk(0%, 98%, 98%, 19%)
Oklch
oklch(53.8% 0.219 29.1)

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

#9F79BA

Dark Plum · MediumOrchid · Violet

HEX
#9F79BA
RGB
rgb(159, 121, 186)
HSL
hsl(275, 32%, 60%)
HSB
hsb(275, 35%, 73%)
CMYK
cmyk(15%, 35%, 0%, 27%)
Oklch
oklch(63.7% 0.103 310.4)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#1972B5

Lake Blue · SteelBlue · Prussian Blue

HEX
#1972B5
RGB
rgb(25, 114, 181)
HSL
hsl(206, 76%, 40%)
HSB
hsb(206, 86%, 71%)
CMYK
cmyk(86%, 37%, 0%, 29%)
Oklch
oklch(53.7% 0.131 247.2)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2CC24
264CF2

Analogous

F26726
F2CC24
B2F226

Triadic

F2CC24
26F2CD
CD26F2

Split-Comp.

F2CC24
26B2F2
6726F2

Tetradic

F2CC24
26F267
264CF2
F226B2

Contrast Matrix WCAG 2.1 Contrast

F2CC24
FA6305
CF0404
9F79BA
1972B5
—
2.0
Fail
3.7
AA Large
2.3
Fail
3.3
AA Large
2.0
Fail
—
1.9
Fail
1.2
Fail
1.7
Fail
3.7
AA Large
1.9
Fail
—
1.6
Fail
1.1
Fail
2.3
Fail
1.2
Fail
1.6
Fail
—
1.4
Fail
3.3
AA Large
1.7
Fail
1.1
Fail
1.4
Fail
—
White BG
1.6Fail
3.1AA Large
5.7AA
3.5AA Large
5.1AA
Black BG
13.4AAA
6.9AA
3.7AA Large
5.9AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E14D
B9B71C
777504
8F8EAA
4040A5

Deuteranopia

E4E756
C1CD21
839204
9194A7
3A34A1

Tritanopia

F06D74
F22E32
C50404
9D9E9B
1D9895

Achromatopsia

C4C4C4
858585
414141
8C8C8C
5F5F5F

Shades & Tints Shades & Tints

#F2CC24

Dark
Light

#FA6305

Dark
Light

#CF0404

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2cc24;
  --color-2: #fa6305;
  --color-3: #cf0404;
  --color-4: #9f79ba;
  --color-5: #1972b5;
}

SCSS

$color-1: #f2cc24;
$color-2: #fa6305;
$color-3: #cf0404;
$color-4: #9f79ba;
$color-5: #1972b5;

TAILWIND

colors: {
  'brand-1': '#f2cc24',
  'brand-2': '#fa6305',
  'brand-3': '#cf0404',
  'brand-4': '#9f79ba',
  'brand-5': '#1972b5',
}

RGB Array

[242, 204, 36], [250, 99, 5], [207, 4, 4], [159, 121, 186], [25, 114, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F2CC24, #FA6305, #CF0404, #9F79BA, #1972B5 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: #f2cc24; --color-2: #fa6305; --color-3: #cf0404; --color-4: #9f79ba; --color-5: #1972b5. 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