The short version
- A pastel color palette is made of light colours with gentle saturation, typically above 85% lightness in HSL.
- Pastels are too light to use as text on white, so a pastel palette needs a dark ink colour for words.
- Most pastel brands also need one deeper anchor colour, strong enough to carry white text on buttons and labels.
- Pastels look most cohesive when they share the same lightness and differ mainly in hue.
- A warm off white ground suits pastels better than pure white, which can make them look washed out.
On this page
A pastel color palette is a set of pale, softly saturated colours: peach, butter, sage, powder blue, lilac. They feel gentle, fresh and friendly, which is why bakeries, skincare, baby brands and wedding stationers reach for them. The catch is that no pastel is dark enough for text. Every palette below therefore pairs three pastels with two working colours: a dark ink for words and a deeper anchor for buttons and accents. The codes are ready to copy and the contrast is already checked.
Five pastel color palettes with hex codes
Peach and sage is warm, natural and calm, a strong choice for food, ceramics and slow living brands. The terracotta anchor stops it from feeling sugary.
Sea glass is cool and clean, suited to wellness, skincare and anything that should feel like fresh air.
Lavender and lemon puts two near opposites together at the same soft lightness, which keeps it cheerful without clashing. Good for stationery, florists and children's books.
Sorbet is the sweetest of the five, warm pinks and apricots for bakeries, nail studios and summer campaigns.
Pistachio is fresh and green, natural without being earthy. It suits plant shops, cafés and eco brands.
To choose between them, start with temperature. Warm pastels (peach, apricot, butter) feel homely and edible; cool pastels (sea glass, powder blue, lavender) feel clean and airy. Then look at your anchor, because it will appear on every button and price tag, and it is the colour people will remember. If none of these anchors suits you, keep the pastels and swap in your own brand colour, darkened until white text on it passes 4.5:1. Need more restraint than pastels allow? Muted colour palettes sit one step greyer.
Why pastels need an ink and an anchor
Every pastel above has a contrast ratio between about 1.1:1 and 1.4:1 against white. That is far below the 4.5:1 that body text needs, which means pastel words on a white page are simply unreadable for many people. Pastel buttons with white labels fail just as badly. The ink and the anchor fix both problems while keeping the palette soft overall.
Colour to choose
Why
Colour to choose
Why
Colour to choose
Why
Colour to choose
Why
Colour to choose
Why
Pick an ink that leans towards one of your pastels rather than a flat grey: cocoa for warm palettes, slate or plum for cool ones. A tinted ink makes the whole palette look designed. The rules behind those numbers are in colour contrast and accessibility.
How to make any colour pastel
A pastel is any hue with high lightness and moderate saturation. In HSL, aim for 85% to 92% lightness and 40% to 80% saturation. The trouble with HSL is that yellow and blue at the same numbers look very different in brightness. OKLCH fixes that, so a single formula gives you an even pastel in every hue.
:root {
/* lightness 90%, gentle chroma, any hue */
--pastel-peach: oklch(90% 0.06 60);
--pastel-lemon: oklch(90% 0.06 100);
--pastel-mint: oklch(90% 0.06 150);
--pastel-aqua: oklch(90% 0.06 200);
--pastel-pink: oklch(90% 0.06 340);
/* the ink: same idea, very dark */
--ink: oklch(30% 0.03 40);
}The same approach turns your brand colour into its own pastel: keep its hue, raise lightness, lower saturation. That gives you a soft background colour that is unmistakably yours. For the theory of tints, see tints, tones and shades.
Mistakes that make pastels look cheap
Avoid
- Pastel text on white or on another pastel
- Six pastels at once with no dark colour
- Pastels at different lightness, so one looks dirty
- Pure white grounds that wash pastels out
- Thin script fonts in pale colours
Do
- Dark, tinted ink for every word
- Three pastels plus an anchor and an ink
- Pastels at matching lightness
- A warm off white such as #fdf8f2
- Solid weights with clear letterforms
Pastel palettes in a real post
Here is the idea at work: soft background, dark ink, one anchor colour used once. If you want pastels as flowing backgrounds rather than flat blocks, pastel gradients has codes, and the soft aesthetic shows how the look carries across a whole feed.
A soft background with dark, confident type. The pastel sets the mood; the ink does the talking.
Pale backgrounds are where readability usually breaks, and Gradiently handles it for you. A Mark's auto ink picks light or dark type for every line from its own palette, so words on a soft pastel Mark stay dark enough to read without you checking each pair.
Questions people ask
What colours are in a pastel color palette?
Pale, softly saturated versions of any hue: peach, butter yellow, sage, mint, powder blue, lavender and blush are the most common.
What is the hex code for pastel pink?
There is no single code, but #f6cfdc is a balanced pastel pink. Pair it with a dark ink such as #4a2e37 for text.
What text colour goes with pastel colours?
A dark, slightly tinted colour such as cocoa #3a2e2a, slate #2f3a4a or plum #3b2f48, which give around 8:1 to 10:1 on typical pastels.
Are pastel colours accessible?
As backgrounds, yes. As text or as button colours behind white text, no: pastels are too light. Use a dark ink for words and a deeper anchor colour for buttons.
How do I make a colour pastel?
Raise its lightness to about 85% to 92% and keep saturation moderate. In CSS, oklch(90% 0.06 H) gives an even pastel for any hue H.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile