The intensity or vividness of a color, how "pure" or "colorful" it appears, ranging from a neutral gray to a fully vivid hue.
Saturation describes how vivid or intense a color is. A fully saturated color is pure and vibrant, with no gray mixed in. A fully desaturated color at the same hue and lightness becomes a neutral gray. Values in between are muted, pastel, or earthy depending on their lightness.
In HSL, saturation is a percentage from 0% (gray) to 100% (fully vivid). In OKLCH, the equivalent dimension is called chroma (C), which ranges from 0 (gray) to approximately 0.4 for the most vivid colors, but the concept is the same.
Saturation is a primary tool for establishing visual hierarchy and emotional tone. Highly saturated colors draw the eye and feel energetic, working well for accents, CTAs, and states that demand attention. Low-saturation colors feel calm and unobtrusive, working well for backgrounds, text, and supporting surfaces.
Most practical UI color palettes use relatively low saturation for the bulk of the interface (backgrounds, text, borders) and reserve high saturation for key interactive elements and brand expressions. Overusing high saturation produces UIs that feel overwhelming and hard to scan.
Adjust saturation to set tone: A vivid orange at 100% saturation feels urgent and bold; the same hue at 20% saturation feels warm and gentle.
Reduce saturation for neutrals: Build your gray palette by starting from a hue with a small amount of saturation (5-10%) to produce "warm" or "cool" neutrals that harmonize with your palette's dominant hue.
Use saturation to express state: Disabled UI elements are typically rendered with reduced saturation and lightness. Selected or highlighted elements may get a saturation boost.
Keep saturation consistent in shade scales: Within a single shade scale, maintaining roughly consistent saturation across lightness steps produces a more cohesive feel. Some designers intentionally reduce saturation at the extremes (very light and very dark shades) for a more refined look.
A primary blue at different saturation levels:
hsl(220 100% 50%): vivid, electric blue (accent/CTA)hsl(220 60% 50%): medium blue (secondary action)hsl(220 20% 50%): muted slate blue (background or subtle UI)hsl(220 5% 50%): blue-gray (neutral surface)In everyday usage, they describe the same quality: how vivid or colorful a color is. Technically, saturation (as used in HSL/HSV) is relative to the current lightness. A color can have high saturation but appear dull if its lightness is very low. Chroma (as used in OKLCH and LCH) is an absolute measure of colorfulness, independent of lightness. For most practical design work, the distinction doesn't matter. Just know that OKLCH's chroma is more perceptually predictable than HSL's saturation.
On dark backgrounds, your eyes adjust to lower ambient brightness. When a highly saturated color appears in that context, it seems much more intense by contrast, a phenomenon called halation. The color appears to 'glow' or bleed into the surrounding dark area. The solution is to use slightly lower saturation and higher lightness for accent colors in dark mode compared to light mode.
Absolutely. Many premium and editorial brands intentionally use low-saturation palettes. Earthy, muted tones feel sophisticated and considered. The brand identity comes from the hue and its application, not the saturation level. High saturation signals energy and boldness; low saturation signals calm, maturity, and refinement. Neither is inherently better. It depends on the brand's character.