# Saturation in design: when to turn colour up or down

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

Saturation is the dial between vivid and grey, and it changes how loud, cheap, calm or expensive a design feels. Here is when to turn it up, when to turn it down, and the codes to do either.

## The short version

- Saturation in design is the intensity of a colour, from fully vivid to completely grey, independent of its hue.
- High saturation draws attention and feels energetic, so it works best in small areas such as buttons, accents and highlights.
- Lower saturation feels calmer and often more premium, and it suits large areas like backgrounds and long reading surfaces.
- Two highly saturated complementary colours placed side by side can appear to vibrate, which makes text on them tiring to read.
- Saturated colours usually need toning down in dark mode and often cannot be matched exactly in CMYK print.

**Saturation in design** is how intense a colour is: fully saturated is vivid and pure, fully desaturated is grey. Turn it up where you want attention and energy, on a button, a sale price or a single highlight. Turn it down for large areas, long reading, premium brands and dark interfaces, where vivid colour quickly becomes tiring. Most good palettes mix the two on purpose: a calm, lower saturation base with one or two saturated notes.

## What saturation is, and what it isn't

Every colour can be described by three properties: hue (which colour it is), lightness (how close to white or black) and saturation (how pure or greyed it is). Change only the saturation and a cherry red slides towards dusty rose, then to grey, without becoming lighter or darker. [Hue, saturation and brightness](https://gradiently.design/guide/hue-saturation-brightness) explains how the three relate.

- Red, saturation 85% to 0%: `linear-gradient(90deg, hsl(350 85% 50%) 0%, hsl(350 60% 50%) 25%, hsl(350 40% 50%) 50%, hsl(350 20% 50%) 75%, hsl(350 0% 50%) 100%)`
- Blue, saturation 85% to 0%: `linear-gradient(90deg, hsl(210 85% 45%) 0%, hsl(210 60% 45%) 25%, hsl(210 40% 45%) 50%, hsl(210 20% 45%) 75%, hsl(210 0% 45%) 100%)`
- Green, saturation 70% to 0%: `linear-gradient(90deg, hsl(150 70% 38%) 0%, hsl(150 50% 38%) 25%, hsl(150 32% 38%) 50%, hsl(150 15% 38%) 75%, hsl(150 0% 38%) 100%)`

Three hues with lightness held steady while saturation drops. The middle of each strip is where many sophisticated brand colours live.

In HSL, saturation is the second number. In the newer oklch colour space the equivalent is chroma, and it behaves more evenly across hues, so a yellow and a blue at the same chroma look equally intense. [HSL colours](https://gradiently.design/guide/hsl-colors) covers the older model and how to read its numbers.

## When to turn saturation up

- **The one thing to press.** A saturated button on a quiet page needs no arrow pointing at it. This is the job of an [accent colour](https://gradiently.design/guide/accent-color).
- **Short, loud moments.** Sale announcements, launch posts and event countdowns are meant to interrupt a scroll.
- **Young, playful or sporty brands.** Children's products, energy drinks and festivals often wear high saturation as part of their personality.
- **Data that must stand out.** In a chart, saturate the series that matters and grey the rest.
- **Small areas on dark grounds.** A vivid colour in a small area on near black reads as light, which is why neon works at night.

## When to turn saturation down

- **Large areas.** A full screen of pure saturated colour is tiring. Backgrounds usually work better slightly greyed.
- **Premium positioning.** Muted, complex colours such as olive, oxblood and slate often read as more considered and expensive than primaries.
- **Long reading.** Articles, documents and dashboards need a calm surface people can look at for an hour.
- **Dark mode.** Saturated colours glow and smear on dark backgrounds. Lower the saturation and raise the lightness a little; [dark mode design](https://gradiently.design/guide/dark-mode-design) has the detail.
- **Behind photographs and text.** A quieter background lets the photo and the words lead.

A portrait sale post reading Weekend sale, 48 hours only

A short, loud moment such as a weekend sale is where high saturation earns its place. Portrait post at 1080×1350.

A portrait journal post titled Notes from the studio

Something people should linger on, like a journal post, is where calmer, lower saturation colour belongs.

## The vibration problem

Put two highly saturated complementary colours side by side, such as red on green or blue on orange, and the edge between them seems to shimmer. It is an optical effect, and it makes text on those pairs genuinely uncomfortable to read even when the contrast ratio looks acceptable. The fix is to desaturate one of the pair, or separate them with a neutral.

### Vibrates

- Pure red text on pure green
- Saturated blue on saturated orange
- Magenta beside lime at full strength
- Vivid colours side by side across a whole poster

### Reads calmly

- Deep red text on a muted sage
- Navy on a soft apricot
- Magenta accent on a greyed lime ground
- One vivid colour on a lower saturation base

## How to adjust saturation in CSS

Hex codes hide saturation, which is why adjusting it by eye in hex is slow. Work in HSL or oklch instead, or mix a colour with grey using `color-mix()`.

```css
:root {
  /* HSL: the second value is saturation */
  --brand: hsl(350 80% 48%);
  --brand-muted: hsl(350 35% 48%);

  /* oklch: the second value is chroma */
  --accent: oklch(0.65 0.2 30);
  --accent-soft: oklch(0.65 0.08 30);

  /* color-mix: blend towards a grey of similar lightness */
  --brand-quiet: color-mix(in oklch, var(--brand) 60%, #808080);
}
```

Three ways to lower saturation while keeping the hue: HSL saturation, oklch chroma, and mixing with grey.

A useful habit is to define each brand colour at two saturations from the start: a full version for accents and a muted version for large fills. Then nobody has to improvise a softer shade later.

Photographs follow the same logic. A busy, saturated photo behind a headline competes with it; pull the photo's saturation down by a third or so and the words take the lead without any box or shadow behind them. Going the other way, a single saturated object in an otherwise muted photo, a red coat in a grey street, is one of the oldest ways to direct the eye.

## Saturation in print

Screens can show more saturated colour than CMYK ink can print, especially bright blues, greens, oranges and purples. A vivid screen colour often prints noticeably duller. If saturation is central to your brand, consider a Pantone spot ink for print, and check a proof before a large run. [RGB vs CMYK](https://gradiently.design/guide/rgb-vs-cmyk) explains the gap.

- Full red: #e8173a
- Muted red: #b8505f
- Full blue: #1c7ae0
- Muted blue: #4f6f93
- Full green: #14a85a
- Muted green: #5b8a6f

Each brand colour at two saturations. The full versions are for small, loud moments; the muted ones carry large areas and survive print better.

Saturation also works alongside [colour temperature](https://gradiently.design/guide/color-temperature): a warm muted palette feels vintage, a cool muted one feels Scandinavian. For ready made sets at each end of the dial, see [muted colour palettes](https://gradiently.design/guide/muted-color-palettes) and [bright colour palettes](https://gradiently.design/guide/bright-color-palettes).

Gradiently's Marks apply the same principle to a living background: the calmest, best contrasting region moves behind the text and busy detail relaxes there, so the words sit on a quieter patch while the rest of the Mark keeps its colour.

## FAQ

### What is saturation in design?

The intensity or purity of a colour, from fully vivid to completely grey. It is separate from hue and lightness.

### Is high saturation bad?

No, but it is best in small areas and short moments. Large areas of high saturation are tiring and can look cheap.

### What is the difference between saturation and brightness?

Saturation is how much grey is mixed into a colour; brightness or lightness is how close it is to white or black. You can change one without the other.

### Why do saturated colours look worse in dark mode?

On dark backgrounds vivid colours appear to glow and blur at the edges. Lowering saturation slightly and raising lightness keeps them crisp.

### How do I make a colour less saturated in CSS?

Lower the second value in `hsl()` or `oklch()`, or blend it with grey using `color-mix(in oklch, yourcolour 60%, #808080)`.