How intense or how 'washed out' a colour looks — high saturation is vivid, low saturation is closer to grey.
In HSL/HSV colour models, saturation measures a colour's distance from a neutral grey of the same lightness, expressed as a percentage.
Saturation and brightness/value are different axes — a colour can be highly saturated but dark (deep red) or highly saturated but light (bright yellow).
A traffic-cone orange is highly saturated; a stone beige is very low saturation.
Saturation is the main lever behind 'muted' and 'vivid' colour trends and behind Adjust My Colour's more/less-saturated adjustments.
The CIE defines saturation as the colourfulness of an area judged in proportion to its own brightness. The HSL and HSV figures that most software reports are simpler: both come from the spread between the largest and smallest RGB channel, divided by the largest channel in HSV and by a term that depends on lightness in HSL. Both run from 0% to 100% and neither is a measurement of how saturated a colour looks.
| Colour | HSL saturation | HSV saturation | CIELAB chroma |
|---|---|---|---|
| Cream #fffdd0 | 100% | 18% | 22.8 |
| Pink #ffc0cb | 100% | 25% | 24.4 |
| Sage Green #9caf88 | 20% | 22% | 22.5 |
| Navy Blue #000080 | 100% | 100% | 80.3 |
| Red #ff0000 | 100% | 100% | 104.6 |
Cream scores 100% in HSL and 18% in HSV. HSL measures saturation against the most saturated colour possible at that lightness, and near white almost nothing is possible, so a faint yellow counts as fully saturated. Navy blue scores 100% in HSV with a chroma of 80.3, lower than Red's, because it is dark. Colourwise's muted, vivid and neutral labels use the HSV column for this reason.
How this was calculated: HSL and HSV saturation and CIELAB chroma (the length of the a*, b* vector) from each catalogue HEX value.
Filtering or sorting a palette by HSL saturation to find the quiet colours.
Creams, pale pinks and near-blacks come back as 100% saturated, as the table shows for Cream, and the filter returns the opposite of what was wanted. HSV saturation or OKLCH chroma sorts them correctly.
Pushing the saturation slider on a photograph of a product.
Channels hit their maximum and clip, detail in the most colourful areas flattens, and the product on screen stops matching the product in the box.