Chroma
The absolute colorfulness of a color — how far it is from a neutral gray of the same lightness.
What it means
Chroma measures how colorful a color is in perceptually uniform spaces like OKLCH and LCH. Unlike HSL saturation, which is relative and can be misleading, chroma is an absolute value: a chroma of 0 means pure gray, and higher values mean more intense color.
The key advantage of chroma is consistency across hues. An OKLCH chroma of 0.15 looks similarly vivid whether the hue is blue, red, or green. This makes chroma the right tool for building design systems where you need predictable color intensity across an entire palette.
Why it matters in palette design
When building design tokens, chroma gives you reliable control over color intensity. You can define a set of chroma values (e.g., 0.01 for surfaces, 0.05 for borders, 0.15 for interactive elements, 0.25 for primary accents) and apply them across any hue to get consistent visual weight. PerfectPalette's OKLCH-based scale builder relies on chroma for precisely this reason.
Common confusion
Chroma vs. saturation: Saturation (HSL) is a percentage relative to the lightness of that specific color, so "100% saturated" looks very different at L=90 vs L=30. Chroma (OKLCH) is an absolute number, so the same chroma value produces the same perceived colorfulness regardless of lightness.
Example
A design system defines surface tokens at chroma 0.01 (nearly gray), border tokens at 0.04, secondary text at 0.08, and primary actions at 0.20. Swapping the hue from blue to purple across these tokens preserves the same visual hierarchy because chroma is perceptually uniform.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.