HSL and HSV Look Almost Identical — They're Not the Same Color Model

Same first two letters, different third dimension

HSL (hue, saturation, lightness) and HSV (hue, saturation, value — also called HSB, for brightness) both describe a color using an angle for hue and a percentage for saturation, which is why they're so often mixed up. The difference that actually matters is the third number, and it doesn't mean the same thing in each model.

What "lightness" means in HSL

In HSL, lightness runs from black (0%) through the full, purest version of the hue (50%) to white (100%). This means a fully saturated HSL color only reaches its most vivid, intense version exactly at 50% lightness — push lightness higher and you're mixing in white, push it lower and you're mixing in black, in both directions moving away from the pure hue.

What "value" means in HSV

In HSV, value runs from black (0%) to the full, purest version of the hue (100%) — there's no separate "washing out toward white" direction built into the value axis at all. White itself is only reached in HSV by simultaneously lowering saturation to 0% while keeping value at 100%, not by raising value past the pure hue.

Why this trips people up in practice

Because both models are visualized as similar-looking wheels or sliders in design software, it's easy to assume a color picker's third slider behaves the same way regardless of which model it's using — then get confused when dragging "lightness" to 100% produces white in one tool but a saturated color in another. The two models are mathematically related and always convert losslessly back and forth for the same underlying RGB color, but they are genuinely different coordinate systems, not two names for the same thing.

Convert between all of them at once

Our Color Picker / Color Code Converter keeps HEX, RGB, HSL and HSV all in sync live, so you can see exactly how the same color's numbers differ across models without doing the math yourself.