Saturation
How vivid or muted a color appears — high saturation is intense and pure, low saturation approaches gray.
What it means
Saturation describes the intensity of a color's hue. A fully saturated red is vivid and punchy; reduce saturation and it fades toward a muted, grayish pink. In HSL, saturation is expressed as a percentage (0% = pure gray, 100% = maximum vibrancy).
Saturation behaves differently across color models. In HSL, it can produce unnaturally vivid colors at certain lightness levels. OKLCH uses "chroma" instead, which is perceptually uniform — meaning equal chroma values look equally vivid to the human eye regardless of hue.
Why it matters in palette design
Saturation controls visual weight and energy. High-saturation accents draw the eye to CTAs and alerts. Low-saturation neutrals create calm surfaces for text and data. A palette where every color is highly saturated feels aggressive; one where everything is desaturated feels lifeless. The balance between vivid and muted is what gives a palette character.
Common confusion
Saturation vs. chroma: In HSL, saturation is relative to the color's own lightness range, which makes it unreliable for comparing intensity across different hues. Chroma (used in OKLCH and LCH) is an absolute measure of colorfulness, making it more predictable for design systems.
Example
An e-commerce site uses high-saturation orange for "Add to cart" buttons (the one action that must command attention) but keeps product card backgrounds, borders, and body text at very low saturation. The contrast in vibrancy creates clear visual hierarchy.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.