Pastel gradients that stay fresh, not sugary

A pastel gradient is a blend of pale, softly tinted colours: blush into butter, lilac into sky, mint into cream. Pastels have high lightness and only a little saturation, which is why they feel gentle, fresh and friendly. The catch is that they are also easy to make too sweet, and nearly impossible to read white text on. Both are fixable with a dark ink, a paper ground and one colour that is slightly less obvious than the rest.

What makes a colour pastel

A pastel is a colour with a lot of white in it: high lightness, low to moderate saturation. In the OKLCH colour space, most pastels sit around 0.88 to 0.95 lightness with a small chroma. That gives a neat trick for making pastel gradients that feel even: fix the lightness and chroma, and change only the hue. Every colour then carries the same visual weight, and none of them shouts.

Fresh or sugary: the difference

Pastels tip into sugary when everything is equally sweet: pink, baby blue and lilac at the same saturation, white type, rounded everything. They feel fresh when something in the design pushes back. That might be a dustier, greyer colour, a deep ink for the words, an off-white paper ground or a crisp, serious typeface.

Pair pastels with a dark ink

White type on a pastel almost always fails contrast, because both are very light. The fix is a dark ink: a deep version of one of the gradient's own hues, such as indigo on lilac or burgundy on blush. It keeps the palette in one family and reads comfortably. Here are measured ratios for common inks on pastel grounds. For the rules behind them, see colour contrast and accessibility.

Use a paper ground

Pastels on pure white can look washed out, and on screens, pure white is the brightest thing there is. A warm off-white ground, such as #f8f1ea, makes pastel colours look deliberate, like watercolour or risograph ink on paper. Let the pastel bloom from one corner and fade into the paper, rather than filling the whole surface.

A light grain pushes the paper feeling further. Keep it very subtle on pastels, because noise is easy to see on light colours; grainy gradients has starting amounts.

A pastel gradient in CSS

In CSS, the paper ground, the bloom and the ink come together in a few lines. Blending pastels in OKLCH keeps the middle from going chalky when the hues are far apart, and a colour hint lets the paper take most of the surface.

.pastel {
  background-color: #f8f1ea; /* paper */
  background-image:
    radial-gradient(circle at 15% 10%, #fbcfe8 0%, transparent 45%),
    radial-gradient(circle at 90% 85%, #d5e3d0 0%, transparent 50%),
    linear-gradient(160deg in oklch, #f8f1ea, 60%, #e9d5ff);
  color: #312e81; /* indigo ink */
}

Keep pastel pairs close in hue for the cleanest result, as in two-colour gradients. When you do want distant pastels together, route them through a pale lilac or butter so the middle stays tinted instead of turning whitish grey.

Where pastel gradients work

• Beauty, skincare, wellness and fragrance
• Baby, wedding, stationery and gifting
• Spring and Easter campaigns, bakeries and cafés
• Calm software onboarding and help pages
• Soft, dreamy aesthetics, especially with holographic sheen; see holographic gradients

If you like the softness but want more contrast, move one step towards aesthetic backgrounds with a deeper accent. You can also search the Market for words like "soft lilac" or "pale peach" to find pastel Marks and design with them straight away.