← Back to Editor

#FFD6E3 · #EDE8ED · #D4EBF0 · #B5B2D4 · #B09CBF

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#FFD6E3

Rouge · Linen · Cherry Blossom

HEX
#FFD6E3
RGB
rgb(255, 214, 227)
HSL
hsl(341, 100%, 92%)
HSB
hsb(341, 16%, 100%)
CMYK
cmyk(0%, 16%, 11%, 0%)
Oklch
oklch(91.4% 0.049 357.1)

TraditionalRouge」· PaintCherry Blossom」· Creative Rose Petal

#EDE8ED

Mauve · Lavender · Lavender

HEX
#EDE8ED
RGB
rgb(237, 232, 237)
HSL
hsl(300, 12%, 92%)
HSB
hsb(300, 2%, 93%)
CMYK
cmyk(0%, 2%, 0%, 7%)
Oklch
oklch(93.6% 0.009 325.6)

TraditionalMauve」· PaintLavender」· Creative Rose Petal

#D4EBF0

Sky Blue · Lavender · Glacier Blue

HEX
#D4EBF0
RGB
rgb(212, 235, 240)
HSL
hsl(191, 48%, 89%)
HSB
hsb(191, 12%, 94%)
CMYK
cmyk(12%, 2%, 0%, 6%)
Oklch
oklch(92.5% 0.025 212.2)

TraditionalSky Blue」· PaintGlacier Blue」· Creative Arctic Pool

#B5B2D4

Wisteria · LightSteelBlue · Cobalt Blue

HEX
#B5B2D4
RGB
rgb(181, 178, 212)
HSL
hsl(245, 28%, 76%)
HSB
hsb(245, 16%, 83%)
CMYK
cmyk(15%, 16%, 0%, 17%)
Oklch
oklch(77.7% 0.048 289.3)

TraditionalWisteria」· PaintCobalt Blue」· Creative Lavender Dream

#B09CBF

Lilac · DarkGray · Lilac Purple

HEX
#B09CBF
RGB
rgb(176, 156, 191)
HSL
hsl(274, 21%, 68%)
HSB
hsb(274, 18%, 75%)
CMYK
cmyk(8%, 18%, 0%, 25%)
Oklch
oklch(72.2% 0.055 310.6)

TraditionalLilac」· PaintLilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFD6E3
D6FFF2

Analogous

FFD6F8
FFD6E3
FFDED6

Triadic

FFD6E3
E3FFD6
D6E3FF

Split-Comp.

FFD6E3
D6FFDE
D6F8FF

Tetradic

FFD6E3
F8FFD6
D6FFF2
DED6FF

Contrast Matrix WCAG 2.1 Contrast

FFD6E3
EDE8ED
D4EBF0
B5B2D4
B09CBF
1.1
Fail
1.1
Fail
1.6
Fail
1.9
Fail
1.1
Fail
1.0
Fail
1.7
Fail
2.1
Fail
1.1
Fail
1.0
Fail
1.6
Fail
2.0
Fail
1.6
Fail
1.7
Fail
1.6
Fail
1.2
Fail
1.9
Fail
2.1
Fail
2.0
Fail
1.2
Fail
White BG
1.3Fail
1.2Fail
1.2Fail
2.0Fail
2.5Fail
Black BG
16.0AAA
17.4AAA
16.9AAA
10.3AAA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDE0
EBEBEC
DEDEEF
B4B4CC
A7A7B7

Deuteranopia

F0F3DF
EBEBEB
DDDBEF
B4B4CA
A9AAB5

Tritanopia

FDDDDD
EDEBEB
D5EEEE
B5C5C4
AFB0AE

Achromatopsia

E4E4E4
EAEAEA
E5E5E5
B7B7B7
A6A6A6

Shades & Tints Shades & Tints

#FFD6E3

Dark
Light

#EDE8ED

Dark
Light

#D4EBF0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffd6e3;
  --color-2: #ede8ed;
  --color-3: #d4ebf0;
  --color-4: #b5b2d4;
  --color-5: #b09cbf;
}

SCSS

$color-1: #ffd6e3;
$color-2: #ede8ed;
$color-3: #d4ebf0;
$color-4: #b5b2d4;
$color-5: #b09cbf;

TAILWIND

colors: {
  'brand-1': '#ffd6e3',
  'brand-2': '#ede8ed',
  'brand-3': '#d4ebf0',
  'brand-4': '#b5b2d4',
  'brand-5': '#b09cbf',
}

RGB Array

[255, 214, 227], [237, 232, 237], [212, 235, 240], [181, 178, 212], [176, 156, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #FFD6E3, #EDE8ED, #D4EBF0, #B5B2D4, #B09CBF 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: #ffd6e3; --color-2: #ede8ed; --color-3: #d4ebf0; --color-4: #b5b2d4; --color-5: #b09cbf. 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