← Back to Editor

#FF4F87 · #FF6998 · #FF85AB · #FFD17D · #F2E7D2

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

#FF4F87

Rouge · LightCoral · Rose Pink

HEX
#FF4F87
RGB
rgb(255, 79, 135)
HSL
hsl(341, 100%, 65%)
HSB
hsb(341, 69%, 100%)
CMYK
cmyk(0%, 69%, 47%, 0%)
Oklch
oklch(68.7% 0.214 5.6)

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

#FF6998

Rouge · LightCoral · Rose Pink

HEX
#FF6998
RGB
rgb(255, 105, 152)
HSL
hsl(341, 100%, 71%)
HSB
hsb(341, 59%, 100%)
CMYK
cmyk(0%, 59%, 40%, 0%)
Oklch
oklch(72.0% 0.187 3.5)

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

#FF85AB

Rouge · LightCoral · Cherry Blossom

HEX
#FF85AB
RGB
rgb(255, 133, 171)
HSL
hsl(341, 100%, 76%)
HSB
hsb(341, 48%, 100%)
CMYK
cmyk(0%, 48%, 33%, 0%)
Oklch
oklch(76.2% 0.153 1.6)

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

#FFD17D

Goose Yellow · Khaki · Warm Sun

HEX
#FFD17D
RGB
rgb(255, 209, 125)
HSL
hsl(39, 100%, 75%)
HSB
hsb(39, 51%, 100%)
CMYK
cmyk(0%, 18%, 51%, 0%)
Oklch
oklch(88.3% 0.115 81.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#F2E7D2

Goose Yellow · Beige · Peach Orange

HEX
#F2E7D2
RGB
rgb(242, 231, 210)
HSL
hsl(39, 55%, 89%)
HSB
hsb(39, 13%, 95%)
CMYK
cmyk(0%, 5%, 13%, 5%)
Oklch
oklch(93.1% 0.030 83.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF4F87
4DFFC6

Analogous

FF4DDE
FF4F87
FF6D4D

Triadic

FF4F87
85FF4D
4D85FF

Split-Comp.

FF4F87
4DFF6D
4DDEFF

Tetradic

FF4F87
DEFF4D
4DFFC6
6D4DFF

Contrast Matrix WCAG 2.1 Contrast

FF4F87
FF6998
FF85AB
FFD17D
F2E7D2
—
1.1
Fail
1.4
Fail
2.2
Fail
2.5
Fail
1.1
Fail
—
1.2
Fail
1.9
Fail
2.2
Fail
1.4
Fail
1.2
Fail
—
1.6
Fail
1.9
Fail
2.2
Fail
1.9
Fail
1.6
Fail
—
1.2
Fail
2.5
Fail
2.2
Fail
1.9
Fail
1.2
Fail
—
White BG
3.1AA Large
2.7Fail
2.3Fail
1.4Fail
1.2Fail
Black BG
6.7AA
7.7AAA
9.2AAA
14.7AAA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B179
BEBD8D
CAC9A2
EBEB91
EDEDD7

Deuteranopia

BDCA76
C7D28A
D1DAA0
EEF196
EEEFD8

Tritanopia

F66F6C
F88482
F99B99
FDA1A5
F1DBDC

Achromatopsia

8A8A8A
9B9B9B
AEAEAE
D5D5D5
E8E8E8

Shades & Tints Shades & Tints

#FF4F87

Dark
Light

#FF6998

Dark
Light

#FF85AB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff4f87;
  --color-2: #ff6998;
  --color-3: #ff85ab;
  --color-4: #ffd17d;
  --color-5: #f2e7d2;
}

SCSS

$color-1: #ff4f87;
$color-2: #ff6998;
$color-3: #ff85ab;
$color-4: #ffd17d;
$color-5: #f2e7d2;

TAILWIND

colors: {
  'brand-1': '#ff4f87',
  'brand-2': '#ff6998',
  'brand-3': '#ff85ab',
  'brand-4': '#ffd17d',
  'brand-5': '#f2e7d2',
}

RGB Array

[255, 79, 135], [255, 105, 152], [255, 133, 171], [255, 209, 125], [242, 231, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF4F87, #FF6998, #FF85AB, #FFD17D, #F2E7D2 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. 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: #ff4f87; --color-2: #ff6998; --color-3: #ff85ab; --color-4: #ffd17d; --color-5: #f2e7d2. 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. 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