← Back to Editor

#FE4C80 · #F99BBF · #F5D8EE · #E6B566 · #302B42

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

#FE4C80

Rouge · LightCoral · Rose Pink

HEX
#FE4C80
RGB
rgb(254, 76, 128)
HSL
hsl(342, 99%, 65%)
HSB
hsb(342, 70%, 100%)
CMYK
cmyk(0%, 70%, 50%, 0%)
Oklch
oklch(68.0% 0.215 7.6)

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

#F99BBF

Rouge · LightPink · Cherry Blossom

HEX
#F99BBF
RGB
rgb(249, 155, 191)
HSL
hsl(337, 89%, 79%)
HSB
hsb(337, 38%, 98%)
CMYK
cmyk(0%, 38%, 23%, 2%)
Oklch
oklch(79.5% 0.120 355.7)

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

#F5D8EE

Mauve · Lavender · Lavender

HEX
#F5D8EE
RGB
rgb(245, 216, 238)
HSL
hsl(314, 59%, 90%)
HSB
hsb(314, 12%, 96%)
CMYK
cmyk(0%, 12%, 3%, 4%)
Oklch
oklch(91.3% 0.043 334.3)

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

#E6B566

Ginger · SandyBrown · Warm Sun

HEX
#E6B566
RGB
rgb(230, 181, 102)
HSL
hsl(37, 72%, 65%)
HSB
hsb(37, 56%, 90%)
CMYK
cmyk(0%, 21%, 56%, 10%)
Oklch
oklch(80.1% 0.113 78.0)

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

#302B42

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#302B42
RGB
rgb(48, 43, 66)
HSL
hsl(253, 21%, 21%)
HSB
hsb(253, 35%, 26%)
CMYK
cmyk(27%, 35%, 0%, 74%)
Oklch
oklch(30.5% 0.041 293.8)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FE4C80
4DFEC9

Analogous

FE4DDB
FE4C80
FE714D

Triadic

FE4C80
82FE4D
4D82FE

Split-Comp.

FE4C80
4DFE71
4DDBFE

Tetradic

FE4C80
DBFE4D
4DFEC9
714DFE

Contrast Matrix WCAG 2.1 Contrast

FE4C80
F99BBF
F5D8EE
E6B566
302B42
—
1.6
Fail
2.4
Fail
1.7
Fail
4.2
AA Large
1.6
Fail
—
1.5
Fail
1.1
Fail
6.8
AA
2.4
Fail
1.5
Fail
—
1.4
Fail
10.3
AAA
1.7
Fail
1.1
Fail
1.4
Fail
—
7.2
AAA
4.2
AA Large
6.8
AA
10.3
AAA
7.2
AAA
—
White BG
3.2AA Large
2.0Fail
1.3Fail
1.9Fail
13.5AAA
Black BG
6.6AA
10.5AAA
15.9AAA
11.2AAA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1AF73
D0CFB6
E8E8E9
D1D079
2E2E3C

Deuteranopia

BBC970
D6DDB4
EAECE7
D4D77E
2E2E3B

Tritanopia

F56967
F4AFAE
F4E4E4
E4888C
303837

Achromatopsia

878787
BBBBBB
E3E3E3
BBBBBB
2F2F2F

Shades & Tints Shades & Tints

#FE4C80

Dark
Light

#F99BBF

Dark
Light

#F5D8EE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fe4c80;
  --color-2: #f99bbf;
  --color-3: #f5d8ee;
  --color-4: #e6b566;
  --color-5: #302b42;
}

SCSS

$color-1: #fe4c80;
$color-2: #f99bbf;
$color-3: #f5d8ee;
$color-4: #e6b566;
$color-5: #302b42;

TAILWIND

colors: {
  'brand-1': '#fe4c80',
  'brand-2': '#f99bbf',
  'brand-3': '#f5d8ee',
  'brand-4': '#e6b566',
  'brand-5': '#302b42',
}

RGB Array

[254, 76, 128], [249, 155, 191], [245, 216, 238], [230, 181, 102], [48, 43, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FE4C80, #F99BBF, #F5D8EE, #E6B566, #302B42 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: #fe4c80; --color-2: #f99bbf; --color-3: #f5d8ee; --color-4: #e6b566; --color-5: #302b42. 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