Chroma vs saturation

Chroma is raw colorfulness. Saturation is colorfulness measured against lightness. Same feeling, different yardstick.

how intense the color ishow far from graywhy is 100% saturation not always the same colorcroma vs saturationcolorfulnessthe intensity sliderwhy my colors look uneven at the same saturation

See it

Live demo coming soon

What it is

Both words describe how much color is in a color, but they measure from different baselines. Chroma is absolute colorfulness: how far the color sits from gray, full stop. Saturation is relative colorfulness, measured against how bright the color already is, and there is no single formula for it. Color-appearance science defines it against brightness. HSL and HSV each compute their own S from the RGB channels, by different math, which is why the same color reports different saturation numbers in the two models. That is also why a near-black navy and a glowing cyan can both report 100% saturation in HSL while having wildly different amounts of actual color in them.

Use saturation when you are eyeballing things in an HSL picker. Use chroma when you are building a system: OKLCH exposes chroma directly (the C in oklch(0.7 0.15 250)), so you can hold colorfulness steady across a ramp instead of watching it drift as steps get darker.

Gotcha: maximum chroma is not the same for every hue. Yellow peaks while it is very light, blue peaks while it is fairly dark, so a palette built at one fixed chroma across all hues will clip out of gamut in some places and look weak in others. Clamp per hue, or let a gamut-mapping step do it for you.

Ask AI for it

Rebuild this palette in OKLCH. Hold chroma constant at 0.14 across all hues at lightness 0.65, then clamp any swatch that falls outside the sRGB gamut down to its nearest in-gamut chroma instead of letting it clip. Output each color as oklch() plus a hex fallback, and note which hues had to be reduced.

You might have meant

oklchhsl hsvmuted paletteneon palettegamut mapping

Go deeper