# Pastel color palettes: soft codes for gentle brands

[Canonical HTML page](https://gradiently.design/guide/pastel-color-palettes)

Pastels are easy to love and hard to use: on their own they cannot carry text. Every palette here comes with the two extra colours that make it work.

## 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.

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.

- Peach #f9d5c7: #f9d5c7
- Butter #fbe7b5: #fbe7b5
- Sage #cfe3d1: #cfe3d1
- Terracotta #ad5a45: #ad5a45
- Cocoa ink #3a2e2a: #3a2e2a

Cocoa ink on peach is 9.6:1. White on terracotta is 4.9:1, enough for button labels.

**Sea glass** is cool and clean, suited to wellness, skincare and anything that should feel like fresh air.

- Sea glass #c9e9e4: #c9e9e4
- Powder blue #c9dff2: #c9dff2
- Mist #e3f1ec: #e3f1ec
- Deep lagoon #3f7f86: #3f7f86
- Slate ink #2f3a4a: #2f3a4a

Slate ink on sea glass is 8.9:1. White on deep lagoon is 4.6:1.

**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.

- Lavender #ddd3f2: #ddd3f2
- Lemon #fbf0b5: #fbf0b5
- Blush #f6cfdc: #f6cfdc
- Violet #7a5ba8: #7a5ba8
- Plum ink #3b2f48: #3b2f48

Plum ink on lavender is 8.7:1 and on lemon 10.8:1. White on violet is 5.4:1.

**Sorbet** is the sweetest of the five, warm pinks and apricots for bakeries, nail studios and summer campaigns.

- Strawberry #f6cfdc: #f6cfdc
- Apricot #fcd9b8: #fcd9b8
- Vanilla #fbe7b5: #fbe7b5
- Raspberry #b54f6e: #b54f6e
- Berry ink #4a2e37: #4a2e37

Berry ink on strawberry is 8.6:1. White on raspberry is 4.9:1.

**Pistachio** is fresh and green, natural without being earthy. It suits plant shops, cafés and eco brands.

- Pistachio #d9e8c4: #d9e8c4
- Celery #eef3d9: #eef3d9
- Peach #f9d5c7: #f9d5c7
- Leaf #4f7a3f: #4f7a3f
- Moss ink #2e3b33: #2e3b33

Moss ink on pistachio is 9.1:1. White on leaf is 5:1. The peach is a small warm accent.

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](https://gradiently.design/guide/muted-color-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.

| Use | Colour to choose | Why |
| --- | --- | --- |
| Page and section backgrounds | A pastel, or a warm off white | Large soft areas set the mood |
| Headlines and body text | The ink | Dark enough for 8:1 or more on every pastel |
| Buttons and tags | The anchor, with white text | Passes 4.5:1 and gives the eye a focal point |
| Illustrations and shapes | Any pastel, plus the anchor sparingly | Variety without noise |
| Text on photos | The ink on a pastel panel, or white on a dark photo area | Pastels disappear over busy images |

A simple job list for any pastel palette. Check your own pairs with a contrast checker before publishing.

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](https://gradiently.design/guide/color-contrast-accessibility).

## How to make any colour pastel

A pastel is any hue with high lightness and moderate saturation. In [HSL](https://gradiently.design/guide/hsl-colors), 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](https://gradiently.design/guide/oklch-explained) fixes that, so a single formula gives you an even pastel in every hue.

```css
: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);
}
```

Change only the hue and every pastel keeps the same visual weight. Keep chroma around 0.04 to 0.07; higher starts to look like candy.

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](https://gradiently.design/guide/tints-tones-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](https://gradiently.design/guide/pastel-gradients) has codes, and the [soft aesthetic](https://gradiently.design/guide/soft-aesthetic) shows how the look carries across a whole feed.

A soft pastel Instagram post for a bakery announcing that lemon cake is back this weekend

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.

## FAQ

### 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.