Saturation
The intensity or purity of a color. High saturation produces vivid colors, while low saturation approaches gray. Zero saturation yields a completely achromatic tone.
Saturation is one of the three fundamental color attributes (along with hue and lightness/value) that quantifies a color's vividness or purity. A fully saturated color contains no gray component and appears at maximum chromatic intensity. As saturation decreases, colors become progressively muted until reaching zero saturation - a neutral gray with no chromatic information.
- HSL/HSV representation: In HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) color models, saturation is expressed as a percentage from 0% to 100%. CSS's
hsl()function provides intuitive saturation control for web developers - Saturation and naturalness: Excessive saturation causes colors to clip and appear artificial - skin tones shift orange, skies look painted. The Vibrance control preferentially boosts less-saturated colors while protecting already-vivid tones from oversaturation
- Perceptual uniformity: Saturation adjustments in RGB or HSL are not perceptually uniform. CIELAB's Chroma dimension is designed around human perception, enabling more natural-looking saturation modifications across different hues
In photo editing, saturation adjustment is a fundamental color correction operation. Landscape photography often benefits from increased saturation for vivid scenery, while portrait work typically uses restrained saturation to preserve natural skin tones. Web developers use CSS filter: saturate() for real-time saturation changes, enabling hover effects and dark mode adaptations. Grayscale conversion is achieved simply with filter: saturate(0).