(visualizing DIN 6164 saturation vs. OKLCH chroma)
The Problem
Why do artists confuse saturation and chroma?
Both words describe how colorful a color is. But they measure it differently — and the difference reshapes a hue plane completely, affecting how palettes hold together across light and dark values.
Most digital color-pickers use a "Saturation" slider, providing different increments of purity that are not perceptually even increments. Meanwhile, modern perceptually-uniform spaces like OKLCH use chroma explicitly. The two scales are not interchangeable.
This visualization lets you compare them side by side. The next four slides explain what each measure means and what its iso-lines look like on a real hue plane.
What is Saturation?
CIE definitionColorfulness of an area judged in proportion to its brightness.
Saturation measures how free a color is from whitishness — how purely chromatic it appears relative to its own brightness. A dim, murky color and a blazing vivid one can share the same saturation if their ratio of colorfulness to brightness is equal.
Crucially, saturation is a ratio, not an absolute amount. This is what separates it from chroma.
For our visualization of saturation, we'll use DIN 6164, a system that calibrates saturation to equal perceptual increments, rather than using the simple HSL version of saturation.
In chroma mode, the x-axis is absolute chroma. Because saturation is a ratio (colorfulness ÷ brightness), the same saturation value requires progressively less chroma as lightness falls toward black — so iso-sat lines fan inward, all converging at the black point.
What is Chroma?
CIE definitionColorfulness of an area judged relative to the brightness of a similarly illuminated area that appears white.
Chroma measures a color's difference from a gray of the same lightness level — how much color it has compared to a neutral of equal brightness. Unlike saturation, it is an absolute amount, not a ratio.
A dark violet and a bright lavender at the same hue can have identical chroma values even though they look very different, because chroma doesn't scale with brightness.
OKLCH expresses chroma as Euclidean distance from the achromatic axis in OKLab space. Values run from 0 (neutral) to ~0.37 at the sRGB gamut edge.
Because the x-axis is chroma, iso-chroma lines are perfectly vertical — they don't bend toward black. The lines simply stop where they hit the gamut boundary; there is no convergence.
What to explore
Mode toggle Switches the x-axis between saturation and chroma. In x = Saturation mode, equal-saturation lines are vertical and equal-chroma lines curve away from black. Flip to x = Chroma mode, and equal-saturation lines converge at black.
Saturation · Chroma · Lightness Use the line toggles to show or hide each family of iso-lines independently. Try showing both Saturation and Chroma at once to see where they diverge most.
Hue slider — drag it across the spectrum. The shapes shift dramatically: green hues have a very wide gamut, violet hues a narrow one. The relationship between saturation and chroma changes accordingly.
Click or drag anywhere on the color field to pick a color. The side panel shows its saturation and chroma values simultaneously.
visualization mode
Hue plane
Click or drag the color field to pick a color
CIE xy · DIN 6164 iso-sat rings · hue ray at current hue
#
H°
S%
L%
L
C
H°
Hue (OKLCH)—
Saturation (DIN 6164)—
Chroma (OKLCH)—
sRGB—
Saturation
DIN 6164 absolute saturation: distance from D65 white in CIE xy chromaticity space, divided by a fixed scale (0.019 xy-units per DIN step). Integer steps = equal perceptual increments. Independent of luminance and gamut boundary.