← Back to Editor

#F54364 · #F2AC19 · #7AE976 · #F5C1EF · #DC2FCD

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

#F54364

Peach Pink · Tomato · Coral Red

HEX
#F54364
RGB
rgb(245, 67, 100)
HSL
hsl(349, 90%, 61%)
HSB
hsb(349, 73%, 96%)
CMYK
cmyk(0%, 73%, 59%, 4%)
Oklch
oklch(65.1% 0.213 15.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F2AC19

Ginger · GoldenRod · Sunflower

HEX
#F2AC19
RGB
rgb(242, 172, 25)
HSL
hsl(41, 89%, 52%)
HSB
hsb(41, 90%, 95%)
CMYK
cmyk(0%, 29%, 90%, 5%)
Oklch
oklch(79.1% 0.160 78.3)

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

#7AE976

Emerald · LightGreen · Apple Green

HEX
#7AE976
RGB
rgb(122, 233, 118)
HSL
hsl(118, 72%, 69%)
HSB
hsb(118, 49%, 91%)
CMYK
cmyk(48%, 0%, 49%, 9%)
Oklch
oklch(84.2% 0.185 143.1)

Traditional「Emerald」· Paint「Apple Green」· Creative Mint Breeze

#F5C1EF

Mauve · Pink · Lavender

HEX
#F5C1EF
RGB
rgb(245, 193, 239)
HSL
hsl(307, 72%, 86%)
HSB
hsb(307, 21%, 96%)
CMYK
cmyk(0%, 21%, 2%, 4%)
Oklch
oklch(87.1% 0.084 330.2)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#DC2FCD

Rose Purple · MediumOrchid · Violet

HEX
#DC2FCD
RGB
rgb(220, 47, 205)
HSL
hsl(305, 71%, 52%)
HSB
hsb(305, 79%, 86%)
CMYK
cmyk(0%, 79%, 7%, 14%)
Oklch
oklch(63.5% 0.257 332.2)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F54364
42F5D4

Analogous

F542BC
F54364
F57B42

Triadic

F54364
63F542
4263F5

Split-Comp.

F54364
42F57B
42BCF5

Tetradic

F54364
BCF542
42F5D4
7B42F5

Contrast Matrix WCAG 2.1 Contrast

F54364
F2AC19
7AE976
F5C1EF
DC2FCD
—
1.8
Fail
2.3
Fail
2.3
Fail
1.1
Fail
1.8
Fail
—
1.3
Fail
1.3
Fail
2.0
Fail
2.3
Fail
1.3
Fail
—
1.0
Fail
2.6
Fail
2.3
Fail
1.3
Fail
1.0
Fail
—
2.6
Fail
1.1
Fail
2.0
Fail
2.6
Fail
2.6
Fail
—
White BG
3.6AA Large
2.0Fail
1.5Fail
1.5Fail
3.9AA Large
Black BG
5.9AA
10.7AAA
13.7AAA
13.8AAA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A65C
D4D33D
AAAB92
DEDEE4
9190A7

Deuteranopia

B2C05A
D8DD45
A49B99
E2E5E1
9BA89E

Tritanopia

EC5654
EE595F
80A8AD
F2DBD9
D38982

Achromatopsia

7C7C7C
B0B0B0
BBBBBB
D6D6D6
757575

Shades & Tints Shades & Tints

#F54364

Dark
Light

#F2AC19

Dark
Light

#7AE976

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f54364;
  --color-2: #f2ac19;
  --color-3: #7ae976;
  --color-4: #f5c1ef;
  --color-5: #dc2fcd;
}

SCSS

$color-1: #f54364;
$color-2: #f2ac19;
$color-3: #7ae976;
$color-4: #f5c1ef;
$color-5: #dc2fcd;

TAILWIND

colors: {
  'brand-1': '#f54364',
  'brand-2': '#f2ac19',
  'brand-3': '#7ae976',
  'brand-4': '#f5c1ef',
  'brand-5': '#dc2fcd',
}

RGB Array

[245, 67, 100], [242, 172, 25], [122, 233, 118], [245, 193, 239], [220, 47, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F54364, #F2AC19, #7AE976, #F5C1EF, #DC2FCD 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: #f54364; --color-2: #f2ac19; --color-3: #7ae976; --color-4: #f5c1ef; --color-5: #dc2fcd. 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