Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Saturation

How pure a colour is, and the dial that most often needs turning down in interface work.

Definition

Saturation, called chroma in perceptual colour spaces, describes the intensity of a hue. Fully saturated colours are vivid; desaturated colours approach grey at the same lightness.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Why interfaces desaturate
  3. Saturation guidelines
  4. In practice
  5. Continue from here

Why interfaces desaturate

Fully saturated colours over large areas cause visual fatigue, compete with content, and are difficult to pair with anything. Interface palettes typically reserve high saturation for small elements that need to be found, and use desaturated versions everywhere else.

The common structure is a saturated accent used at small scale, a low-saturation tint of the same hue for backgrounds, and neutrals carrying a trace of the accent hue so the whole palette feels related.

Saturation guidelines

  • Large surfaces: low saturation. The bigger the area, the lower the chroma it can carry comfortably.
  • Small elements: higher saturation is fine and often necessary to be seen.
  • Text: saturation reduces legibility at small sizes. Prefer near-neutral dark text.
  • Dark mode: reduce saturation. The same colour appears more intense against a dark background and can vibrate.
  • Disabled states: reduce saturation and contrast together, but keep the element identifiable.

In practice

Tinted neutrals

Design systems

Adding a small amount of the accent hue into the neutral ramp makes greys feel part of the palette rather than borrowed. The effect is subtle and noticeable when it is absent.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Related concept

Connected closely enough to change how you apply this.