Pastel Color Palette Guide: Hex Codes, Combinations and Contrast

Pastels have a way of making a design feel calm before anyone reads a word. A pale pink header, a mint card, a soft lavender button: together they say friendly, light and unhurried.

They are also surprisingly easy to get wrong. Pick a handful of pale colours at random and the result can look washed out, sugary, or simply hard to read.

This guide covers what actually makes a colour pastel, a few ready-to-use pastel colour codes, and the practical rules that keep a soft palette looking intentional rather than faded.

What makes a colour pastel

A pastel is a pale tint of a hue. In practical terms, you start with a colour and mix a lot of white into it, which raises its lightness and softens its intensity.

The name comes from pastel sticks, the art medium made of pigment pressed together with a binder. Their powdery, light shades gave the whole family of pale colours its name.

If you work in HSL (hue, saturation, lightness), pastels usually sit at a lightness of roughly 75 to 92 percent. Saturation varies more than people expect: some pastels are fairly saturated but very light, like a baby pink, while others are low in saturation and closer to grey.

That second group is what people usually mean by muted or dusty pastels. Same lightness, less colour, and a more grown-up feel.

How to turn any colour into a pastel

You do not need a ready-made list to find good pastels. Any hue can become one with a couple of small adjustments.

Open a colour picker in HSL mode, keep the hue you like, and raise the lightness to somewhere between 80 and 90 percent. Then bring the saturation down until the colour stops looking neon.

For a clean, sweet pastel, leave saturation fairly high. For a softer, dustier result, drop it to around 20 to 40 percent.

Doing this with every colour in an existing palette is a quick way to make a lighter version of a brand, for example for a seasonal campaign or a children's section of a site.

Pastel color codes you can start with

Here are three small sets of pastel hex codes that work well together. Treat them as starting points rather than rules, and adjust the hue to suit your brand.

Classic soft set: #FFD1DC (pale pink), #B5EAD7 (mint), #C7CEEA (periwinkle), #FFDAC1 (peach) and #E2F0CB (pale lime).

Muted, dusty set: #D4A5A5 (dusty rose), #9CAFAA (sage), #B8A9C9 (muted lilac) and #E6CFC0 (warm sand).

Pastel blue set: #E3F2FD (ice blue), #BBDEFB (sky), #A7C7E7 (powder blue) and #89ABE3 (soft cornflower).

The classic set is cheerful and works well for children's products, seasonal campaigns and playful brands. The muted set suits interiors, wellness, skincare and anything that should feel quiet.

The pastel blue set is the easiest to use in interfaces, because one hue in several lightness steps gives you backgrounds, borders and highlights without any risk of colours clashing.

How to build a pastel palette that holds together

The most common mistake with pastels is picking colours that are all equally light. Each one looks lovely on its own, but side by side they blur into a single pale haze.

Give the palette a structure instead. Choose one or two main pastels for large areas, one accent that is a little deeper, and a dark anchor colour for text.

Keep the lightness of your main pastels similar, so nothing jumps forward by accident. Then let the accent break that pattern on purpose, so the eye knows where to look.

It also helps to stay within one temperature. Warm pastels such as peach, blush and butter yellow sit comfortably together, as do cool ones like mint, ice blue and lavender. Mixing both can work, but it takes more care.

If you would rather start from something real, a photo of flowers, macarons or a sunlit wall is a good source. Our free color palette extractor pulls the main colours out of an image, and the guide on creating a color palette from a photo explains how to turn that raw list into something usable.

Contrast is the hard part

Pastels are light by definition, and that makes them almost useless as text colours on white. The numbers make the problem obvious.

Pale pink #FFD1DC on white has a contrast ratio of about 1.4:1, and mint #B5EAD7 is about 1.3:1. The minimum for normal body text under WCAG is 4.5:1, so neither comes close.

The fix is to flip the roles. Use pastels as backgrounds and surfaces, and put dark text on top of them. A deep slate such as #2D3142 reaches more than 9:1 on both of those colours, which is comfortably readable.

Buttons and icons need the same thinking. Interface elements like borders and icons should reach at least 3:1 against their surroundings, which a pale pastel on white will not. Give them a darker outline or a deeper fill.

If the 4.5:1 and 3:1 figures are new to you, our explainer on the WCAG contrast ratio walks through what each threshold means and where it applies.

Muted pastels and when to use them

Muted pastels are pastels with some grey mixed in. They feel calmer and more sophisticated than their brighter cousins, which is why they turn up so often in interior design, stationery and lifestyle brands.

Because they are slightly darker, muted pastels also tend to give you a little more contrast to work with. Sage #9CAFAA and dusty rose #D4A5A5 are still too light for text on white, but they hold their shape better as icons and dividers.

They pair naturally with off-white, warm grey and natural textures. If a bright pastel palette feels too sweet for your project, muting the same hues is often all it takes.

Pastels for seasons and occasions

Pastels are closely tied to spring, which is why so many Easter colour palettes are built from soft yellow, lilac, mint and pink. Those associations are useful when you want a design to feel seasonal at a glance.

The same hues can be pushed in other directions. Warmer peach and sand tones can carry into autumn, while icy blues and lavenders work for winter campaigns that want to feel crisp rather than heavy.

The trick is to keep one or two of your brand's core colours in place and change the pastel accents around them. That keeps the season obvious without making the brand unrecognisable.

Using pastels in web design

On websites, pastels work best as supporting colours. Soft section backgrounds, tinted cards, highlighted callouts and gentle hover states are all good places for them.

Keep body text dark and keep the main background either white or a very light neutral. Then introduce pastels in blocks, so each section has a clear edge.

Avoid stacking several different pastel backgrounds directly next to each other. Two neighbouring pastels often have almost no contrast between them, and the boundary disappears.

Finally, check your palette on a few real screens. Very light colours can look different from one display to the next, and a pastel that seems gentle on one monitor can almost vanish on a brighter phone screen.

A quick checklist

Before you commit to a pastel palette, run through a few questions.

Do your main pastels share a similar lightness, with one deliberate accent? Is there a dark colour reserved for text, and does it pass 4.5:1 on every pastel it sits on?

Do buttons, icons and form borders have enough contrast to be seen? And does the palette still look right on a phone, in daylight, at full brightness?

If the answer to all of those is yes, you have a pastel palette that looks soft without being hard to use.

Cover image: Tanja-Milfoil, CC BY-SA 2.0, via Wikimedia Commons.