What HSL values make a color pastel?

Around 85 to 92 percent lightness with 30 to 55 percent saturation. Below 25 percent saturation the color reads as grey; above 65 percent it stops feeling soft.

Can I use pastel colors for text?

Rarely. Pastels on a white background typically land near 1.5:1 contrast, far under the 4.5:1 WCAG AA needs for body text. Use them for backgrounds, borders, and fills, and keep text a dark neutral.

How many pastels should a palette have?

Three to five. Pastels are low contrast by nature, so a large pastel palette turns mushy. Anchor them with one dark neutral for text and one saturated accent for actions.

Pastel Palette Generator

Pastel Color Palette Generator

Generate soothing pastel color palettes. Perfect for soft, muted designs. Customize the number of colors and regenerate for new combinations.

Export Code

/* CSS Variables */
:root {
  --pastel-palette-Pastel 1: #D9E1ED;
  --pastel-palette-Pastel 2: #DABFBE;
  --pastel-palette-Pastel 3: #D7ACB0;
  --pastel-palette-Pastel 4: #E7DCC6;
  --pastel-palette-Pastel 5: #EAD4CD;
}

What makes a color pastel

A pastel is high lightness and low to moderate saturation: roughly 80 to 95 percent lightness and 25 to 60 percent saturation in HSL. Push lightness higher and colors collapse into off-white; drop saturation further and they read as grey.

Pastels work as backgrounds and fills, not as text. A pastel on white almost never clears 4.5:1, so pair them with a dark neutral for anything readable.

Frequently asked

What HSL values make a color pastel?: Around 85 to 92 percent lightness with 30 to 55 percent saturation. Below 25 percent saturation the color reads as grey; above 65 percent it stops feeling soft.
Can I use pastel colors for text?: Rarely. Pastels on a white background typically land near 1.5:1 contrast, far under the 4.5:1 WCAG AA needs for body text. Use them for backgrounds, borders, and fills, and keep text a dark neutral.
How many pastels should a palette have?: Three to five. Pastels are low contrast by nature, so a large pastel palette turns mushy. Anchor them with one dark neutral for text and one saturated accent for actions.

Related tools

← All tools