Pastel Dream Color Palette

A gentle, dreamy pastel set of soft pink, butter yellow, mint, and lilac.
Use as a gradient →

Colors

#FFD6E8
#FFF3B0
#C1FBA4
#B2F7EF
#C7CEEA

Contrast on Light & Dark Backgrounds

Color Hex On White On Black
#FFD6E8 T - T -
#FFF3B0 T - T -
#C1FBA4 T - T -
#B2F7EF T - T -
#C7CEEA T - T -
Each circle shows the color as text on white and black, with a simulated WCAG AA pass/fail badge. Not a guarantee of accessibility compliance.

Pastel Dream CSS Code

HEX Copy
#FFD6E8
#FFF3B0
#C1FBA4
#B2F7EF
#C7CEEA
RGBA Copy
rgba(255, 214, 232, 1.0)
rgba(255, 243, 176, 1.0)
rgba(193, 251, 164, 1.0)
rgba(178, 247, 239, 1.0)
rgba(199, 206, 234, 1.0)
HSLA Copy
hsla(334, 100%, 92%, 1.0)
hsla(51, 100%, 85%, 1.0)
hsla(100, 92%, 81%, 1.0)
hsla(173, 81%, 83%, 1.0)
hsla(228, 45%, 85%, 1.0)

More Color Palettes

FAQ

What colors are in the Pastel Dream palette?

A gentle, dreamy pastel set of soft pink, butter yellow, mint, and lilac.

How do I turn the Pastel Dream palette into a CSS gradient?

Use background: linear-gradient(to right, #FFD6E8, #FFF3B0, #C1FBA4, #B2F7EF, #C7CEEA);, or click "Use as a gradient" above to open it in the live generator.

Generate a Gradient

Start your own gradient →