← Back to Editor

#FF2487 · #D75D96 · #FDDE81 · #CD2B7E · #FADE60

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

#FF2487

Dark Violet · DeepPink · Rose Pink

HEX
#FF2487
RGB
rgb(255, 36, 135)
HSL
hsl(333, 100%, 57%)
HSB
hsb(333, 86%, 100%)
CMYK
cmyk(0%, 86%, 47%, 0%)
Oklch
oklch(65.7% 0.250 1.4)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#D75D96

Dark Violet · LightCoral · Rose Pink

HEX
#D75D96
RGB
rgb(215, 93, 150)
HSL
hsl(332, 60%, 60%)
HSB
hsb(332, 57%, 84%)
CMYK
cmyk(0%, 57%, 30%, 16%)
Oklch
oklch(64.7% 0.164 353.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#FDDE81

Goose Yellow · Khaki · Sunflower

HEX
#FDDE81
RGB
rgb(253, 222, 129)
HSL
hsl(45, 97%, 75%)
HSB
hsb(45, 49%, 99%)
CMYK
cmyk(0%, 12%, 49%, 1%)
Oklch
oklch(90.7% 0.118 91.5)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#CD2B7E

Rose Purple · MediumVioletRed · Camellia

HEX
#CD2B7E
RGB
rgb(205, 43, 126)
HSL
hsl(329, 65%, 49%)
HSB
hsb(329, 79%, 80%)
CMYK
cmyk(0%, 79%, 39%, 20%)
Oklch
oklch(57.3% 0.207 355.1)

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

#FADE60

Ginger · Khaki · Sunflower

HEX
#FADE60
RGB
rgb(250, 222, 96)
HSL
hsl(49, 94%, 68%)
HSB
hsb(49, 62%, 98%)
CMYK
cmyk(0%, 11%, 62%, 2%)
Oklch
oklch(90.1% 0.147 96.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF2487
24FF9C

Analogous

FF24F4
FF2487
FF2F24

Triadic

FF2487
86FF24
2486FF

Split-Comp.

FF2487
24FF2F
24F4FF

Tetradic

FF2487
F4FF24
24FF9C
2F24FF

Contrast Matrix WCAG 2.1 Contrast

FF2487
D75D96
FDDE81
CD2B7E
FADE60
—
1.0
Fail
2.7
Fail
1.4
Fail
2.7
Fail
1.0
Fail
—
2.7
Fail
1.4
Fail
2.7
Fail
2.7
Fail
2.7
Fail
—
3.8
AA Large
1.0
Fail
1.4
Fail
1.4
Fail
3.8
AA Large
—
3.7
AA Large
2.7
Fail
2.7
Fail
1.0
Fail
3.7
AA Large
—
White BG
3.6AA Large
3.6AA Large
1.3Fail
4.9AA
1.3Fail
Black BG
5.9AA
5.9AA
15.9AAA
4.2AA Large
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A09E6F
A2A188
F0EF98
87856A
EEEE7E

Deuteranopia

ADBD69
A9B285
F1F49D
909C65
F0F286

Tritanopia

F45C58
D17D7B
FBA9AD
C55A57
F9979C

Achromatopsia

717171
888888
DDDDDD
656565
D8D8D8

Shades & Tints Shades & Tints

#FF2487

Dark
Light

#D75D96

Dark
Light

#FDDE81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff2487;
  --color-2: #d75d96;
  --color-3: #fdde81;
  --color-4: #cd2b7e;
  --color-5: #fade60;
}

SCSS

$color-1: #ff2487;
$color-2: #d75d96;
$color-3: #fdde81;
$color-4: #cd2b7e;
$color-5: #fade60;

TAILWIND

colors: {
  'brand-1': '#ff2487',
  'brand-2': '#d75d96',
  'brand-3': '#fdde81',
  'brand-4': '#cd2b7e',
  'brand-5': '#fade60',
}

RGB Array

[255, 36, 135], [215, 93, 150], [253, 222, 129], [205, 43, 126], [250, 222, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF2487, #D75D96, #FDDE81, #CD2B7E, #FADE60 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: #ff2487; --color-2: #d75d96; --color-3: #fdde81; --color-4: #cd2b7e; --color-5: #fade60. 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