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.
On this page
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). 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 and tints, tones and shades draw the line in more detail.
Seven muted colour palettes with hex codes
- 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.
Contrast
Use for
Contrast
Use for
Contrast
Use for
#3A2A2A textContrast
Use for
#2E3A2C on chalkContrast
Use for
#4A3F4F on mistContrast
Use for
Check your own pairs with the guidance in color contrast. 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.
: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);
}OKLCH explained covers why this space behaves more evenly than HSL, and saturation in design 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.
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 that muted schemes borrow from usually work.
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.
Questions people ask
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.
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