#FFD0D4 + #FAFAFA + #FAF2F8 + #EEEAF2 + #D2D2DC · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#FFD0D4

Peach Pink · Pink · Cherry Blossom

HEX

#FFD0D4

RGB

rgb(255, 208, 212)

HSL

hsl(355, 100%, 91%)

HSB

hsb(355, 18%, 100%)

CMYK

cmyk(0%, 18%, 17%, 0%)

Oklch

oklch(89.9% 0.053 12.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#FAFAFA

Moonlight White · Snow · Cloud White

HEX

#FAFAFA

RGB

rgb(250, 250, 250)

HSL

hsl(0, 0%, 98%)

HSB

hsb(0, 0%, 98%)

CMYK

cmyk(0%, 0%, 0%, 2%)

Oklch

oklch(98.5% 0.000 89.9)

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

#FAF2F8

Mauve · Snow · Lavender

HEX

#FAF2F8

RGB

rgb(250, 242, 248)

HSL

hsl(315, 44%, 96%)

HSB

hsb(315, 3%, 98%)

CMYK

cmyk(0%, 3%, 1%, 2%)

Oklch

oklch(96.9% 0.012 334.1)

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

#EEEAF2

Lilac · Lavender · Lavender

HEX

#EEEAF2

RGB

rgb(238, 234, 242)

HSL

hsl(270, 24%, 93%)

HSB

hsb(270, 3%, 95%)

CMYK

cmyk(2%, 3%, 0%, 5%)

Oklch

oklch(94.2% 0.011 308.3)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#D2D2DC

Wisteria · LightGray · Sky Blue

HEX

#D2D2DC

RGB

rgb(210, 210, 220)

HSL

hsl(240, 13%, 84%)

HSB

hsb(240, 5%, 86%)

CMYK

cmyk(5%, 5%, 0%, 14%)

Oklch

oklch(86.7% 0.014 286.1)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFD0D4

D1FFFB

Analogous

FFD1EC

FFD0D4

FFE4D1

Triadic

FFD0D4

D5FFD1

D1D5FF

Split-Comp.

FFD0D4

D1FFE4

D1ECFF

Tetradic

FFD0D4

ECFFD1

D1FFFB

E4D1FF

Contrast Matrix WCAG 2.1 Contrast

FFD0D4	FAFAFA	FAF2F8	EEEAF2	D2D2DC
—	1.3 Fail	1.3 Fail	1.2 Fail	1.1 Fail
1.3 Fail	—	1.1 Fail	1.1 Fail	1.4 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.4 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.3 Fail
1.1 Fail	1.4 Fail	1.4 Fail	1.3 Fail	—

White BG

1.4Fail

1.0Fail

1.1Fail

1.2Fail

1.5Fail

Black BG

15.2AAA

20.1AAA

19.1AAA

17.7AAA

14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEAD3

FAFAFA

F7F6F7

ECECF0

D2D2DA

Deuteranopia

EDF1D3

FAFAFA

F7F8F6

EDEDF0

D2D2D9

Tritanopia

FDD2D2

FAFAFA

FAF5F5

EEEFEE

D2D8D7

Achromatopsia

DFDFDF

FAFAFA

F5F5F5

ECECEC

D3D3D3

Shades & Tints Shades & Tints

#FFD0D4

Dark

Light

#FAFAFA

Dark

Light

#FAF2F8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffd0d4;
  --color-2: #fafafa;
  --color-3: #faf2f8;
  --color-4: #eeeaf2;
  --color-5: #d2d2dc;
}

SCSS

$color-1: #ffd0d4;
$color-2: #fafafa;
$color-3: #faf2f8;
$color-4: #eeeaf2;
$color-5: #d2d2dc;

TAILWIND

colors: {
  'brand-1': '#ffd0d4',
  'brand-2': '#fafafa',
  'brand-3': '#faf2f8',
  'brand-4': '#eeeaf2',
  'brand-5': '#d2d2dc',
}

RGB Array

[255, 208, 212], [250, 250, 250], [250, 242, 248], [238, 234, 242], [210, 210, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #FFD0D4, #FAFAFA, #FAF2F8, #EEEAF2, #D2D2DC is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ffd0d4; --color-2: #fafafa; --color-3: #faf2f8; --color-4: #eeeaf2; --color-5: #d2d2dc. 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 pastel-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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