# Muted colour palettes: dusty codes for calm brands

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

Sage, dusty rose, slate and clay feel calm because the colour has been softened with grey. Here is how muting works, seven palettes to copy, and the one thing that stops a muted scheme turning to fog.

## The short version

- A muted colour palette is made of colours with reduced saturation, usually by mixing in grey or a little of the opposite hue.
- Muted colours such as sage, dusty rose, slate blue, mauve and clay read as calm, natural and grown up.
- Muted colours often share the same lightness, so a muted palette needs one much darker colour for text and edges.
- Sage green and dusty rose look different in hue but are almost identical in lightness, which is why text in one on the other is unreadable.
- In CSS, color-mix() in the oklch space is a reliable way to mute any brand colour by blending it with grey.

A **muted color palette** is a set of colours with the saturation turned down, so they look dusty, soft and slightly grey rather than pure. Sage `#9CAF88`, dusty rose `#C9A9A6`, slate blue `#6B7F99`, mauve `#B48A9B` and clay `#B5826B` are typical. They suit brands that want to feel calm and considered: ceramics, wellness, stationery, architecture, slow fashion. The catch is that muted colours drift towards the same lightness, so every good muted palette includes one firm dark to hold it together.

## What makes a colour muted

A colour has three settings: hue, saturation and lightness (see [hue, saturation and brightness](https://gradiently.design/guide/hue-saturation-brightness)). Muting lowers saturation while leaving the hue recognisable. There are two classic ways to do it: mix in grey, which designers call making a tone, or mix in a little of the complementary colour, which painters have always done. Both pull the colour towards neutral.

### Pure

- Green `#2ECC71`
- Pink `#FF5C8A`
- Blue `#2F6BFF`
- Orange `#FF7A1A`

### Muted

- Sage `#9CAF88`
- Dusty rose `#C9A9A6`
- Slate blue `#6B7F99`
- Clay `#B5826B`

Muted is not the same as pastel. A pastel adds white, so it stays clean and light; a muted colour adds grey, so it can be light, medium or dark and always feels a little dusty. [Pastel color palettes](https://gradiently.design/guide/pastel-color-palettes) and [tints, tones and shades](https://gradiently.design/guide/tints-tones-shades) draw the line in more detail.

## Seven muted colour palettes with hex codes

- Chalk: #eef0e8
- Sage: #9caf88
- Dusty rose: #c9a9a6
- Clay: #b5826b
- Moss ink: #2e3a2c

Garden studio, the palette most people picture when they hear muted. Moss ink is the anchor that makes the other four usable.

- **Harbour:** fog `#E6E9EA`, slate blue `#6B7F99`, sea grey `#93A3A6`, rope `#C2AD8E`, deep navy `#22303C`.
- **Ceramic:** bisque `#F1E8DD`, clay `#B5826B`, ash glaze `#A7A39A`, iron `#5B4A42`, kiln black `#231D1A`.
- **Lavender dust:** mist `#F1EBE6`, mauve `#B48A9B`, heather `#8E8AA6`, sage `#9CAF88`, aubergine `#4A3F4F`.
- **Olive grove:** cream `#F2EDE1`, olive `#8A8A5C`, dried herb `#B1A87F`, terracotta `#A9674E`, bark `#3A3328`.
- **Nordic:** snow `#F2F3F1`, birch `#D8D1C4`, lichen `#A3AE9D`, fjord `#5F7A80`, pine `#24302E`.
- **Dusty dusk:** parchment `#EFE6DA`, peach dust `#D9A88F`, rose brown `#A06F6B`, plum grey `#6E5866`, night `#2A2329`.

Every one of these ends in a dark. That is not decoration. Without it, there is nothing to set text in and nothing to draw an edge, and the palette looks like a photograph left in the sun.

## Why muted palettes turn to fog

Muting removes the strongest differences between colours, so lightness becomes the only thing left to separate them. Sage `#9CAF88` and dusty rose `#C9A9A6` look like a pretty contrast of green and pink, yet their contrast ratio is 1.09:1: almost the same lightness. Text in one on the other is unreadable. Even sage on pure white only reaches 2.36:1.

| Pair | Contrast | Use for |
| --- | --- | --- |
| Sage on dusty rose | 1.09:1 | Two shapes side by side, never text |
| Sage on white | 2.36:1 | Large shapes and illustration |
| Slate blue on white | 4.10:1 | Large headings only |
| Dusty rose with `#3A2A2A` text | 6.29:1 | Body text, passes AA |
| Moss ink `#2E3A2C` on chalk | 10.39:1 | Body text, passes AAA |
| Aubergine `#4A3F4F` on mist | 8.40:1 | Body text, passes AAA |

WCAG asks for 4.5:1 for body text and 3:1 for large text. In a muted palette, the dark anchor does all the reading work.

Check your own pairs with the guidance in [color contrast](https://gradiently.design/guide/color-contrast-accessibility). A good habit is to convert the palette to greyscale for a moment: if two colours become the same grey, never put one on top of the other.

## How to mute any colour in CSS

If you already have a bright brand colour and want a calmer companion, mix it with grey rather than picking a new colour by eye. `color-mix()` in the oklch space keeps the hue steady while the saturation falls, and it is supported in all current major browsers.

```css
:root {
  --brand: #2f6bff;

  /* the same hue, progressively muted */
  --brand-muted-1: color-mix(in oklch, var(--brand) 70%, #8c8c8c);
  --brand-muted-2: color-mix(in oklch, var(--brand) 45%, #8c8c8c);
  --brand-muted-3: color-mix(in oklch, var(--brand) 25%, #8c8c8c);

  /* or set chroma directly in oklch: low chroma reads as muted */
  --slate: oklch(0.58 0.05 255);
  --sage: oklch(0.72 0.06 130);
}
```

Mixing towards a mid grey mutes without changing the hue. In oklch, a chroma around 0.03 to 0.07 reads as muted; 0.15 and above reads as vivid.

[OKLCH explained](https://gradiently.design/guide/oklch-explained) covers why this space behaves more evenly than HSL, and [saturation in design](https://gradiently.design/guide/color-saturation) covers when to turn it up again.

## Muted gradients and backgrounds

Muted colours make soft, quiet gradients, especially when the stops are close in hue and the light comes from one side. Add a little grain: low contrast blends band easily, and texture makes them look like a surface rather than a screen setting.

- Sage morning: `linear-gradient(160deg, #eef0e8 0%, #9caf88 70%, #6f8460 100%)`
- Peach dust: `radial-gradient(circle at 30% 25%, #efe6da 0%, #d9a88f 55%, #a06f6b 100%)`
- Harbour haze: `linear-gradient(170deg, #e6e9ea 0%, #93a3a6 50%, #6b7f99 100%)`
- Mauve evening: `radial-gradient(circle at 70% 30%, #b48a9b 0%, #6e5866 55%, #2a2329 100%)`

Four muted gradients. Each keeps neighbouring hues, so the blend never turns brown in the middle.

A muted scheme can also take one slightly stronger colour as an accent, such as a terracotta among sages or a deeper teal among greys. Keep it to a single element per design: a price, a button, a date. It gives the eye a place to land without breaking the calm, and it is how the [earth tone palettes](https://gradiently.design/guide/earth-tone-colors) that muted schemes borrow from usually work.

A portrait social post for a ceramics collection with dark lettering on a soft, dusty background

A ceramics post at 1080×1350. Muted colours carry the mood; the dark type carries the message.

If your brand lives in muted colours, a background with its own grain and light does a lot of the work. A Gradiently Mark gives you a soft, distinctive surface that keeps text readable on its own, which matters more in a muted scheme than in any other.

## FAQ

### What is a muted color palette?

A palette of colours with reduced saturation, so they look soft, dusty and slightly grey. Sage, dusty rose, slate blue and clay are common examples.

### What is the difference between muted and pastel colours?

Pastels are made by adding white, so they stay light and clean. Muted colours are made by adding grey, so they can be any lightness and always feel a little dusty.

### How do I make a colour more muted?

Lower its saturation, mix in grey, or add a small amount of its complementary colour. In CSS, `color-mix(in oklch, yourcolour 50%, #8c8c8c)` does it reliably.

### What colours go with sage green?

Dusty rose, clay, cream, warm grey and a deep moss or charcoal for text. Avoid putting text in sage on dusty rose: they are almost the same lightness.

### Are muted colours good for branding?

They suit calm, craft and wellness brands well. Include one strong dark for text and edges so the palette stays legible.