← Back to Editor

#F0476C · #9F1A34 · #FDBC45 · #FDE4CE · #57CCDA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F0476C

Peach Pink · Tomato · Coral Red

HEX
#F0476C
RGB
rgb(240, 71, 108)
HSL
hsl(347, 85%, 61%)
HSB
hsb(347, 70%, 94%)
CMYK
cmyk(0%, 70%, 55%, 6%)
Oklch
oklch(64.8% 0.205 12.3)

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

#9F1A34

Vermilion · Brown · Wine Red

HEX
#9F1A34
RGB
rgb(159, 26, 52)
HSL
hsl(348, 72%, 36%)
HSB
hsb(348, 84%, 62%)
CMYK
cmyk(0%, 84%, 67%, 38%)
Oklch
oklch(45.8% 0.166 17.2)

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

#FDBC45

Ginger · SandyBrown · Warm Sun

HEX
#FDBC45
RGB
rgb(253, 188, 69)
HSL
hsl(39, 98%, 63%)
HSB
hsb(39, 73%, 99%)
CMYK
cmyk(0%, 26%, 73%, 1%)
Oklch
oklch(83.5% 0.150 78.8)

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

#FDE4CE

Apricot · Bisque · Peach Orange

HEX
#FDE4CE
RGB
rgb(253, 228, 206)
HSL
hsl(28, 92%, 90%)
HSB
hsb(28, 19%, 99%)
CMYK
cmyk(0%, 10%, 19%, 1%)
Oklch
oklch(93.3% 0.040 63.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#57CCDA

Lake Blue · MediumTurquoise · Lake Green

HEX
#57CCDA
RGB
rgb(87, 204, 218)
HSL
hsl(186, 64%, 60%)
HSB
hsb(186, 60%, 85%)
CMYK
cmyk(60%, 6%, 0%, 15%)
Oklch
oklch(78.4% 0.106 206.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0476C
47F0CB

Analogous

F047C0
F0476C
F07747

Triadic

F0476C
6CF047
476CF0

Split-Comp.

F0476C
47F077
47C0F0

Tetradic

F0476C
C0F047
47F0CB
7747F0

Contrast Matrix WCAG 2.1 Contrast

F0476C
9F1A34
FDBC45
FDE4CE
57CCDA
—
2.2
Fail
2.1
Fail
2.9
Fail
1.9
Fail
2.2
Fail
—
4.7
AA
6.4
AA
4.1
AA Large
2.1
Fail
4.7
AA
—
1.4
Fail
1.1
Fail
2.9
Fail
6.4
AA
1.4
Fail
—
1.6
Fail
1.9
Fail
4.1
AA Large
1.1
Fail
1.6
Fail
—
White BG
3.6AA Large
7.9AAA
1.7Fail
1.2Fail
1.9Fail
Black BG
5.8AA
2.7Fail
12.5AAA
17.2AAA
11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A563
65642E
E1E062
F2F2D3
8A8BD7

Deuteranopia

B1BD61
6D772C
E5EA69
F4F6D5
837AD6

Tritanopia

E85C5A
982928
FA797E
FCD8D8
5DD4D3

Achromatopsia

7E7E7E
454545
C2C2C2
E9E9E9
ABABAB

Shades & Tints Shades & Tints

#F0476C

Dark
Light

#9F1A34

Dark
Light

#FDBC45

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0476c;
  --color-2: #9f1a34;
  --color-3: #fdbc45;
  --color-4: #fde4ce;
  --color-5: #57ccda;
}

SCSS

$color-1: #f0476c;
$color-2: #9f1a34;
$color-3: #fdbc45;
$color-4: #fde4ce;
$color-5: #57ccda;

TAILWIND

colors: {
  'brand-1': '#f0476c',
  'brand-2': '#9f1a34',
  'brand-3': '#fdbc45',
  'brand-4': '#fde4ce',
  'brand-5': '#57ccda',
}

RGB Array

[240, 71, 108], [159, 26, 52], [253, 188, 69], [253, 228, 206], [87, 204, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0476C, #9F1A34, #FDBC45, #FDE4CE, #57CCDA 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: #f0476c; --color-2: #9f1a34; --color-3: #fdbc45; --color-4: #fde4ce; --color-5: #57ccda. 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