← Back to Editor

#FF4F4F · #FF7345 · #FF9F30 · #FFCD36 · #FFF533

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 App

Color Details Color Details

#FF4F4F

Peach Pink · Tomato · Coral Red

HEX
#FF4F4F
RGB
rgb(255, 79, 79)
HSL
hsl(0, 100%, 65%)
HSB
hsb(0, 69%, 100%)
CMYK
cmyk(0%, 69%, 69%, 0%)
Oklch
oklch(67.5% 0.213 24.9)

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

#FF7345

Apricot · Tomato · Warm Sun

HEX
#FF7345
RGB
rgb(255, 115, 69)
HSL
hsl(15, 100%, 64%)
HSB
hsb(15, 73%, 100%)
CMYK
cmyk(0%, 55%, 73%, 0%)
Oklch
oklch(71.7% 0.182 38.4)

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

#FF9F30

Ginger · GoldenRod · Warm Sun

HEX
#FF9F30
RGB
rgb(255, 159, 48)
HSL
hsl(32, 100%, 59%)
HSB
hsb(32, 81%, 100%)
CMYK
cmyk(0%, 38%, 81%, 0%)
Oklch
oklch(78.4% 0.162 64.0)

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

#FFCD36

Ginger · Gold · Sunflower

HEX
#FFCD36
RGB
rgb(255, 205, 54)
HSL
hsl(45, 100%, 61%)
HSB
hsb(45, 79%, 100%)
CMYK
cmyk(0%, 20%, 79%, 0%)
Oklch
oklch(86.9% 0.164 89.0)

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

#FFF533

Autumn Sage · Yellow · Sunflower

HEX
#FFF533
RGB
rgb(255, 245, 51)
HSL
hsl(57, 100%, 60%)
HSB
hsb(57, 80%, 100%)
CMYK
cmyk(0%, 4%, 80%, 0%)
Oklch
oklch(94.8% 0.192 106.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF4F4F
4DFFFF

Analogous

FF4DA6
FF4F4F
FFA64D

Triadic

FF4F4F
4DFF4D
4D4DFF

Split-Comp.

FF4F4F
4DFFA6
4DA6FF

Tetradic

FF4F4F
A6FF4D
4DFFFF
A64DFF

Contrast Matrix WCAG 2.1 Contrast

FF4F4F
FF7345
FF9F30
FFCD36
FFF533
—
1.2
Fail
1.6
Fail
2.2
Fail
2.8
Fail
1.2
Fail
—
1.3
Fail
1.8
Fail
2.4
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
1.8
Fail
2.2
Fail
1.8
Fail
1.4
Fail
—
1.3
Fail
2.8
Fail
2.4
Fail
1.8
Fail
1.3
Fail
—
White BG
3.2AA Large
2.7Fail
2.0Fail
1.5Fail
1.1Fail
Black BG
6.5AA
7.8AAA
10.3AAA
14.0AAA
18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B14F
C2C150
D5D54B
E9E95B
FBFB62

Deuteranopia

BDCA4F
CBD553
DBE251
ECF063
FBFC6D

Tritanopia

F64F4F
F8595B
FA6065
FD777E
FF878F

Achromatopsia

848484
989898
AFAFAF
CBCBCB
E2E2E2

Shades & Tints Shades & Tints

#FF4F4F

Dark
Light

#FF7345

Dark
Light

#FF9F30

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff4f4f;
  --color-2: #ff7345;
  --color-3: #ff9f30;
  --color-4: #ffcd36;
  --color-5: #fff533;
}

SCSS

$color-1: #ff4f4f;
$color-2: #ff7345;
$color-3: #ff9f30;
$color-4: #ffcd36;
$color-5: #fff533;

TAILWIND

colors: {
  'brand-1': '#ff4f4f',
  'brand-2': '#ff7345',
  'brand-3': '#ff9f30',
  'brand-4': '#ffcd36',
  'brand-5': '#fff533',
}

RGB Array

[255, 79, 79], [255, 115, 69], [255, 159, 48], [255, 205, 54], [255, 245, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF4F4F, #FF7345, #FF9F30, #FFCD36, #FFF533 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: #ff4f4f; --color-2: #ff7345; --color-3: #ff9f30; --color-4: #ffcd36; --color-5: #fff533. 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 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