Sugar Pastel Color Palette
Light pink and pale blue, soft as spun sugar.
Use as a gradient →
Colors
#FFD1E3
#FFB6D9
#C1E7FF
#A0D8FF
Contrast on Light & Dark Backgrounds
| Color | 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.
Sugar Pastel CSS Code
HEX Copy
#FFD1E3 #FFB6D9 #C1E7FF #A0D8FF
RGBA Copy
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 Copy
hsla(337, 100%, 91%, 1.0) hsla(331, 100%, 86%, 1.0) hsla(203, 100%, 88%, 1.0) hsla(205, 100%, 81%, 1.0)
More Color Palettes
FAQ
What colors are in the Sugar Pastel palette?Light pink and pale blue, soft as spun sugar.
How do I turn the Sugar Pastel palette into a CSS gradient?
Use
background: linear-gradient(to right, #FFD1E3, #FFB6D9, #C1E7FF, #A0D8FF);, or click "Use as a gradient" above to open it in the live generator.