Before building Color Shade Generator, we ran the numbers on a claim we kept seeing repeated in color-science write-ups: that HSL's "lightness" value doesn't actually track how bright a color looks.
We did the math ourselves
Yellow at HSL(60°, 100%, 50%) and blue at HSL(240°, 100%, 50%) — identical lightness value, 50% for both. We converted each to sRGB and computed WCAG relative luminance, the standard measure of how bright a color actually appears. Yellow: 0.928. Blue: 0.072. That's roughly a 13x real difference in brightness, hiding behind two colors HSL considers equally "light."
What that means for a shade generator
A tool that lightens or darkens a color by adjusting HSL lightness by, say, 20 percentage points applies that same numeric shift regardless of hue — but because HSL lightness isn't perceptually uniform, the visible effect is wildly inconsistent from one base color to the next. A blue-based palette and a yellow-based palette built the same way won't feel like they're using a consistent scale, because they aren't, perceptually.
Seeing both side by side
OKLCH was specifically designed so that equal steps in its lightness channel look like equal steps to the eye, regardless of hue — it's part of the CSS Color Level 4 spec and works today in current Chrome, Safari, and Firefox. Rather than picking one and hiding the difference, this tool generates both an HSL scale and an OKLCH scale from the same base color, side by side, so the gap is something you can actually see rather than take on faith.
