← Back to Editor

#F71668 · #FB72A4 · #FFCDDF · #FFFFFF · #FFF6CF

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#F71668

Dark Violet · DeepPink · Rose Pink

HEX
#F71668
RGB
rgb(247, 22, 104)
HSL
hsl(338, 93%, 53%)
HSB
hsb(338, 91%, 97%)
CMYK
cmyk(0%, 91%, 58%, 3%)
Oklch
oklch(62.9% 0.244 9.5)

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

#FB72A4

Rouge · LightCoral · Rose Pink

HEX
#FB72A4
RGB
rgb(251, 114, 164)
HSL
hsl(338, 94%, 72%)
HSB
hsb(338, 55%, 98%)
CMYK
cmyk(0%, 55%, 35%, 2%)
Oklch
oklch(72.9% 0.174 359.4)

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

#FFCDDF

Rouge · Pink · Cherry Blossom

HEX
#FFCDDF
RGB
rgb(255, 205, 223)
HSL
hsl(338, 100%, 90%)
HSB
hsb(338, 20%, 100%)
CMYK
cmyk(0%, 20%, 13%, 0%)
Oklch
oklch(89.7% 0.061 354.8)

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

#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

#FFF6CF

Goose Yellow · Beige · Lemon Cream

HEX
#FFF6CF
RGB
rgb(255, 246, 207)
HSL
hsl(49, 100%, 91%)
HSB
hsb(49, 19%, 100%)
CMYK
cmyk(0%, 4%, 19%, 0%)
Oklch
oklch(97.0% 0.051 96.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F71668
18F7A5

Analogous

F718D9
F71668
F73518

Triadic

F71668
69F718
1869F7

Split-Comp.

F71668
18F735
18D9F7

Tetradic

F71668
D9F718
18F7A5
3518F7

Contrast Matrix WCAG 2.1 Contrast

F71668
FB72A4
FFCDDF
FFFFFF
FFF6CF
—
1.5
Fail
2.9
Fail
4.0
AA Large
3.7
AA Large
1.5
Fail
—
1.9
Fail
2.6
Fail
2.4
Fail
2.9
Fail
1.9
Fail
—
1.4
Fail
1.3
Fail
4.0
AA Large
2.6
Fail
1.4
Fail
—
1.1
Fail
3.7
AA Large
2.4
Fail
1.3
Fail
1.1
Fail
—
White BG
4.0AA Large
2.6Fail
1.4Fail
1.0Fail
1.1Fail
Black BG
5.3AA
8.0AAA
15.1AAA
21.0AAA
19.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

969454
C0BE98
E9E9DB
FFFFFF
FBFBD8

Deuteranopia

A3B34F
C8D295
ECF0DA
FFFFFF
FCFCDB

Tritanopia

EC4441
F48E8C
FDD7D6
FFFFFF
FFE0E2

Achromatopsia

636363
A1A1A1
DEDEDE
FFFFFF
F4F4F4

Shades & Tints Shades & Tints

#F71668

Dark
Light

#FB72A4

Dark
Light

#FFCDDF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f71668;
  --color-2: #fb72a4;
  --color-3: #ffcddf;
  --color-4: #ffffff;
  --color-5: #fff6cf;
}

SCSS

$color-1: #f71668;
$color-2: #fb72a4;
$color-3: #ffcddf;
$color-4: #ffffff;
$color-5: #fff6cf;

TAILWIND

colors: {
  'brand-1': '#f71668',
  'brand-2': '#fb72a4',
  'brand-3': '#ffcddf',
  'brand-4': '#ffffff',
  'brand-5': '#fff6cf',
}

RGB Array

[247, 22, 104], [251, 114, 164], [255, 205, 223], [255, 255, 255], [255, 246, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F71668, #FB72A4, #FFCDDF, #FFFFFF, #FFF6CF 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: #f71668; --color-2: #fb72a4; --color-3: #ffcddf; --color-4: #ffffff; --color-5: #fff6cf. 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 pastel-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