Sugar Pastel Color Palette: Hex Codes & CSS

Q: What colors are in the Sugar Pastel palette?

Light pink and pale blue, soft as spun sugar. Hex codes: #FFD1E3, #FFB6D9, #C1E7FF, #A0D8FF.

Q: How do I turn the Sugar Pastel palette into a CSS gradient?

Use background: linear-gradient(to right, #FFD1E3, #FFB6D9, #C1E7FF, #A0D8FF);, or open it in the live gradient generator to customize it further.

Sugar Pastel Color Palette

Light pink and pale blue, soft as spun sugar.

Make it a gradient →

Want to adjust the palette colors? Use the Color Palette Generator →

Colors

#FFD1E3

#FFB6D9

#C1E7FF

#A0D8FF

Contrast on Light & Dark Backgrounds

Hex	On White	On Black
#FFD1E3	T -	T -
#FFB6D9	T -	T -
#C1E7FF	T -	T -
#A0D8FF	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. Click a check to verify it on colorcontrastcheck.com.

Sugar Pastel CSS Code

#FFD1E3
#FFB6D9
#C1E7FF
#A0D8FF

rgba(255, 209, 227, 1.0)
rgba(255, 182, 217, 1.0)
rgba(193, 231, 255, 1.0)
rgba(160, 216, 255, 1.0)

hsla(337, 100%, 91%, 1.0)
hsla(331, 100%, 86%, 1.0)
hsla(203, 100%, 88%, 1.0)
hsla(205, 100%, 81%, 1.0)

oklch(90.52% 0.0564 352.83)
oklch(85.44% 0.0949 349)
oklch(90.85% 0.0516 235.86)
oklch(85.73% 0.0793 239.24)

The same colors in OKLCH. In a gradient, OKLCH can also blend them more vividly. How OKLCH gradients work →

Similar Palettes

More Color Palettes

FAQ

What colors are in the Sugar Pastel palette?