Lighten and darken a colour
Adjust a colour in HSL, and see what it did to the actual light. The same instruction does a hundred and sixty-five times as much to blue as to yellow. Nothing you choose here leaves your browser — it is worked out on your own device, so there is nothing to send and nothing to log.
"Lighten by 10%" means five different things
Lightening a colour means adding to the L in HSL. Every tool does it that way, and it is not the same as making the colour brighter.
HSL lightness is arithmetic on the encoded numbers. Relative luminance is how much light actually reaches the eye, weighted the way the eye weights it — green about 71%, red 21%, blue 7%. They are not the same quantity and they do not move together.
| Colour | +10 lightness | Change in light |
|---|---|---|
| blue #0000FF | #3333FF | +42.5% |
| red #FF0000 | #FF3333 | +12.3% |
| green #00FF00 | #33FF33 | +1.3% |
| yellow #FFFF00 | #FFFF33 | +0.26% |
The same instruction does a hundred and sixty-five times as much to blue as to yellow. Yellow at lightness 50% is already near the top of what sRGB can emit, so there is almost nothing left to add; blue at the same lightness is emitting 7% of the light and has a long way to go.
This is why a palette built by stepping lightness evenly does not look evenly stepped, and why two colours a tool calls equally light can be miles apart on a screen.
Why HSL anyway
Because it is easy to compute and easy to reason about, and for picking colours by eye it is genuinely useful — the hue wheel matches how people think about colour far better than three channels of light do.
It is only when HSL numbers get treated as measurements of brightness that it goes wrong. This page shows the luminance beside the lightness so you can see the two coming apart.