Why lightening a hex color in RGB gives you grey (and the HSL fix)

Short summary

Lightening or darkening a hex color by nudging RGB channels toward 255 or 0 desaturates it because all channels converge, shrinking the gap that carries hue. Converting to HSL and varying only the Lightness component keeps tints and shades on the same hue, producing clean color scales for design systems. For perceptually uniform spacing, OKLCH handles the non-linear way humans perceive lightness differences automatically and is supported in all current browsers.

• •RGB lightening/darkening desaturates colors because channels converge on 255 or 0, collapsing the hue-carrying gap
• •HSL lets you vary only Lightness while holding Hue and Saturation constant, keeping tints and shades on-hue
• •OKLCH provides perceptually uniform spacing out of the box and is supported in all modern browsers

Generated with AI, which can make mistakes.