← Back to Editor

#FC0069 · #FFFFFF · #FE7DB5 · #FEBACE · #FEE3F1

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

#FC0069

Dark Violet · DeepPink · Camellia

HEX
#FC0069
RGB
rgb(252, 0, 105)
HSL
hsl(335, 100%, 49%)
HSB
hsb(335, 100%, 99%)
CMYK
cmyk(0%, 100%, 58%, 1%)
Oklch
oklch(63.4% 0.254 9.2)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#FE7DB5

Rouge · Orchid · Rose Pink

HEX
#FE7DB5
RGB
rgb(254, 125, 181)
HSL
hsl(334, 98%, 74%)
HSB
hsb(334, 51%, 100%)
CMYK
cmyk(0%, 51%, 29%, 0%)
Oklch
oklch(75.3% 0.167 354.6)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#FEBACE

Rouge · Pink · Cherry Blossom

HEX
#FEBACE
RGB
rgb(254, 186, 206)
HSL
hsl(342, 97%, 86%)
HSB
hsb(342, 27%, 100%)
CMYK
cmyk(0%, 27%, 19%, 0%)
Oklch
oklch(85.7% 0.082 359.7)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#FEE3F1

Mauve · Linen · Cherry Blossom

HEX
#FEE3F1
RGB
rgb(254, 227, 241)
HSL
hsl(329, 93%, 94%)
HSB
hsb(329, 11%, 100%)
CMYK
cmyk(0%, 11%, 5%, 0%)
Oklch
oklch(94.2% 0.035 345.1)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC0069
00FA92

Analogous

FA00E5
FC0069
FA1500

Triadic

FC0069
68FA00
0068FA

Split-Comp.

FC0069
00FA15
00E5FA

Tetradic

FC0069
E5FA00
00FA92
1500FA

Contrast Matrix WCAG 2.1 Contrast

FC0069
FFFFFF
FE7DB5
FEBACE
FEE3F1
—
3.9
AA Large
1.6
Fail
2.5
Fail
3.3
AA Large
3.9
AA Large
—
2.4
Fail
1.6
Fail
1.2
Fail
1.6
Fail
2.4
Fail
—
1.5
Fail
2.0
Fail
2.5
Fail
1.6
Fail
1.5
Fail
—
1.3
Fail
3.3
AA Large
1.2
Fail
2.0
Fail
1.3
Fail
—
White BG
3.9AA Large
1.0Fail
2.4Fail
1.6Fail
1.2Fail
Black BG
5.3AA
21.0AAA
8.8AAA
13.1AAA
17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8D50
FFFFFF
C6C5A7
E1E0C9
F2F2EE

Deuteranopia

9EB04A
FFFFFF
CED7A4
E5EAC8
F4F6ED

Tritanopia

EF3C37
FFFFFF
F89D9A
FBC5C5
FDEBEA

Achromatopsia

575757
FFFFFF
AAAAAA
D1D1D1
EDEDED

Shades & Tints Shades & Tints

#FC0069

Dark
Light

#FFFFFF

Dark
Light

#FE7DB5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc0069;
  --color-2: #ffffff;
  --color-3: #fe7db5;
  --color-4: #febace;
  --color-5: #fee3f1;
}

SCSS

$color-1: #fc0069;
$color-2: #ffffff;
$color-3: #fe7db5;
$color-4: #febace;
$color-5: #fee3f1;

TAILWIND

colors: {
  'brand-1': '#fc0069',
  'brand-2': '#ffffff',
  'brand-3': '#fe7db5',
  'brand-4': '#febace',
  'brand-5': '#fee3f1',
}

RGB Array

[252, 0, 105], [255, 255, 255], [254, 125, 181], [254, 186, 206], [254, 227, 241]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FC0069, #FFFFFF, #FE7DB5, #FEBACE, #FEE3F1 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #fc0069; --color-2: #ffffff; --color-3: #fe7db5; --color-4: #febace; --color-5: #fee3f1. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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