← Back to Editor

#F24D39 · #F49237 · #FFFCD0 · #643023 · #C5B343

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

#F24D39

Vermilion · Tomato · Passion Red

HEX
#F24D39
RGB
rgb(242, 77, 57)
HSL
hsl(6, 88%, 59%)
HSB
hsb(6, 76%, 95%)
CMYK
cmyk(0%, 68%, 76%, 5%)
Oklch
oklch(64.9% 0.205 30.3)

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

#F49237

Tangerine · Coral · Warm Sun

HEX
#F49237
RGB
rgb(244, 146, 55)
HSL
hsl(29, 90%, 59%)
HSB
hsb(29, 77%, 96%)
CMYK
cmyk(0%, 40%, 77%, 4%)
Oklch
oklch(74.8% 0.155 59.0)

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

#FFFCD0

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFCD0
RGB
rgb(255, 252, 208)
HSL
hsl(56, 100%, 91%)
HSB
hsb(56, 18%, 100%)
CMYK
cmyk(0%, 1%, 18%, 0%)
Oklch
oklch(98.2% 0.057 104.2)

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

#643023

Crimson · DarkOliveGreen · Wine Red

HEX
#643023
RGB
rgb(100, 48, 35)
HSL
hsl(12, 48%, 26%)
HSB
hsb(12, 65%, 39%)
CMYK
cmyk(0%, 52%, 65%, 61%)
Oklch
oklch(37.5% 0.079 35.1)

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

#C5B343

Autumn Sage · GoldenRod · Sunflower

HEX
#C5B343
RGB
rgb(197, 179, 67)
HSL
hsl(52, 53%, 52%)
HSB
hsb(52, 66%, 77%)
CMYK
cmyk(0%, 9%, 66%, 23%)
Oklch
oklch(76.1% 0.132 100.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F24D39
3AE0F2

Analogous

F23A84
F24D39
F2A93A

Triadic

F24D39
3AF24D
4D3AF2

Split-Comp.

F24D39
3AF2A9
3A84F2

Tetradic

F24D39
84F23A
3AE0F2
A93AF2

Contrast Matrix WCAG 2.1 Contrast

F24D39
F49237
FFFCD0
643023
C5B343
—
1.5
Fail
3.4
AA Large
3.0
Fail
1.7
Fail
1.5
Fail
—
2.2
Fail
4.5
AA
1.1
Fail
3.4
AA Large
2.2
Fail
—
10.1
AAA
2.0
Fail
3.0
Fail
4.5
AA
10.1
AAA
—
5.0
AA
1.7
Fail
1.1
Fail
2.0
Fail
5.0
AA
—
White BG
3.6AA Large
2.3Fail
1.0Fail
10.6AAA
2.1Fail
Black BG
5.9AA
9.0AAA
20.1AAA
2.0Fail
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABA93E
CAC94D
FEFEDB
4D4D26
BDBD5E

Deuteranopia

B4C03F
CFD752
FEFEDD
515427
BEC065

Tritanopia

EA4243
EF5E62
FFE3E5
612929
C47378

Achromatopsia

7C7C7C
A5A5A5
F8F8F8
3E3E3E
ACACAC

Shades & Tints Shades & Tints

#F24D39

Dark
Light

#F49237

Dark
Light

#FFFCD0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f24d39;
  --color-2: #f49237;
  --color-3: #fffcd0;
  --color-4: #643023;
  --color-5: #c5b343;
}

SCSS

$color-1: #f24d39;
$color-2: #f49237;
$color-3: #fffcd0;
$color-4: #643023;
$color-5: #c5b343;

TAILWIND

colors: {
  'brand-1': '#f24d39',
  'brand-2': '#f49237',
  'brand-3': '#fffcd0',
  'brand-4': '#643023',
  'brand-5': '#c5b343',
}

RGB Array

[242, 77, 57], [244, 146, 55], [255, 252, 208], [100, 48, 35], [197, 179, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F24D39, #F49237, #FFFCD0, #643023, #C5B343 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: #f24d39; --color-2: #f49237; --color-3: #fffcd0; --color-4: #643023; --color-5: #c5b343. 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 general-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