#CFC0D6 + #E4E1E8 + #EDEAF1 + #F1DFE9 + #F1BBDA · 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

#CFC0D6

Lilac · LightGray · Lilac Purple

HEX

#CFC0D6

RGB

rgb(207, 192, 214)

HSL

hsl(281, 21%, 80%)

HSB

hsb(281, 10%, 84%)

CMYK

cmyk(3%, 10%, 0%, 16%)

Oklch

oklch(82.7% 0.034 315.2)

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

#E4E1E8

Wisteria · Lavender · Lavender

HEX

#E4E1E8

RGB

rgb(228, 225, 232)

HSL

hsl(266, 13%, 90%)

HSB

hsb(266, 3%, 91%)

CMYK

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

Oklch

oklch(91.4% 0.010 305.4)

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

#EDEAF1

Wisteria · Lavender · Lavender

HEX

#EDEAF1

RGB

rgb(237, 234, 241)

HSL

hsl(266, 20%, 93%)

HSB

hsb(266, 3%, 95%)

CMYK

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

Oklch

oklch(94.1% 0.010 305.4)

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

#F1DFE9

Mauve · Linen · Cherry Blossom

HEX

#F1DFE9

RGB

rgb(241, 223, 233)

HSL

hsl(327, 39%, 91%)

HSB

hsb(327, 7%, 95%)

CMYK

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

Oklch

oklch(92.1% 0.024 343.0)

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

#F1BBDA

Mauve · Pink · Cherry Blossom

HEX

#F1BBDA

RGB

rgb(241, 187, 218)

HSL

hsl(326, 66%, 84%)

HSB

hsb(326, 22%, 95%)

CMYK

cmyk(0%, 22%, 10%, 5%)

Oklch

oklch(85.0% 0.074 343.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFC0D6

C8D7C1

Analogous

C5C1D7

CFC0D6

D7C1D3

Triadic

CFC0D6

D7D0C1

C1D7D0

Split-Comp.

CFC0D6

D3D7C1

C1D7C5

Tetradic

CFC0D6

D7C5C1

C8D7C1

C1D3D7

Contrast Matrix WCAG 2.1 Contrast

CFC0D6	E4E1E8	EDEAF1	F1DFE9	F1BBDA
—	1.3 Fail	1.5 Fail	1.4 Fail	1.1 Fail
1.3 Fail	—	1.1 Fail	1.0 Fail	1.3 Fail
1.5 Fail	1.1 Fail	—	1.1 Fail	1.4 Fail
1.4 Fail	1.0 Fail	1.1 Fail	—	1.3 Fail
1.1 Fail	1.3 Fail	1.4 Fail	1.3 Fail	—

White BG

1.7Fail

1.3Fail

1.2Fail

1.3Fail

1.6Fail

Black BG

12.2AAA

16.2AAA

17.6AAA

16.5AAA

12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C8D1

E3E3E6

ECECEF

E9E9E7

DAD9D2

Deuteranopia

C9CACF

E3E3E6

ECECEF

EAECE6

DDE1D1

Tritanopia

CECCCC

E4E5E5

EDEEEE

F0E5E4

EECDCB

Achromatopsia

C7C7C7

E3E3E3

ECECEC

E6E6E6

CFCFCF

Shades & Tints Shades & Tints

#CFC0D6

Dark

Light

#E4E1E8

Dark

Light

#EDEAF1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfc0d6;
  --color-2: #e4e1e8;
  --color-3: #edeaf1;
  --color-4: #f1dfe9;
  --color-5: #f1bbda;
}

SCSS

$color-1: #cfc0d6;
$color-2: #e4e1e8;
$color-3: #edeaf1;
$color-4: #f1dfe9;
$color-5: #f1bbda;

TAILWIND

colors: {
  'brand-1': '#cfc0d6',
  'brand-2': '#e4e1e8',
  'brand-3': '#edeaf1',
  'brand-4': '#f1dfe9',
  'brand-5': '#f1bbda',
}

RGB Array

[207, 192, 214], [228, 225, 232], [237, 234, 241], [241, 223, 233], [241, 187, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #CFC0D6, #E4E1E8, #EDEAF1, #F1DFE9, #F1BBDA 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: #cfc0d6; --color-2: #e4e1e8; --color-3: #edeaf1; --color-4: #f1dfe9; --color-5: #f1bbda. 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