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 plate
Reach for this when
- Tuning a brand colour for interface use.
- Building a dark theme.
- Choosing background tints.
- A palette looks correct in swatches and too loud when applied at full-screen scale.
Common mistakes
- Full saturation on large surfaces.
- Carrying light-mode saturation directly into dark mode.
- Saturated small text.
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.
Saturation by role
| Element | Saturation | Why |
|---|---|---|
| Page and surface backgrounds | Very low, a trace of the brand hue | Large areas amplify chroma, and saturated grounds tire the eye |
| Body text | Near zero | Saturated text reduces legibility at small sizes |
| Borders and dividers | Low | They are structure, not signal |
| Primary action | High | It has to win against everything around it |
| Status and semantic fills | Moderate to high | Meaning, used sparingly and in small areas |
| Data visualisation | Moderate, matched across series | One saturated series reads as more important than its neighbours |
In practice
- i.
Tinted neutrals
Design systemsAdding 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.
- ii.
The saturated background that could not hold text
Area amplifies chromaA brand colour that looked energetic on a button was overwhelming across a full-width section, and nothing placed on it met contrast. The same hue at a fraction of the chroma worked at both sizes.
Local chart
FND·021 · Region II · Grid C1
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
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.
- Brand Color in InterfacesFND·024 · UI foundation
- Color Theory for InterfacesFND·019 · UI foundation
- ContrastFND·002 · UI foundation
- Dark ModeFND·027 · UI foundation
- HueFND·020 · UI foundation
- LightnessFND·022 · UI foundation
- NeutralsFND·025 · UI foundation
- ReadabilityFND·036 · UI foundation