Hue, saturation, and value — a color-picker-shaped model
HSV (also called HSB, for hue, saturation, brightness) shares HSL's hue and saturation channels but replaces lightness with value: how bright the color is, measured from black (0%) up to the fully saturated, most vivid version of the hue (100%), with no separate concept of moving toward white. This is the model behind most color-picker widgets built as a square-plus-slider: the square plots saturation against value for a fixed hue, and the slider off to the side selects which hue that square represents — a layout that maps directly onto HSV's three axes, which is why HSV, rather than HSL, tends to be the model designers interact with directly in picker tools, even when the underlying color is ultimately stored as hex or RGB.
Why HSV and HSL disagree on the same color
Converting the same hex value to HSL and to HSV produces different numbers for the second and third channels, because the two models define brightness/lightness differently even though they share the same hue calculation. Take #3B82F6 again: in HSL it's hsl(217, 91%, 60%); in HSV it's hsv(217, 76%, 96%). The hue, 217°, matches exactly in both — hue is calculated the same way regardless of model. Saturation and the third channel differ substantially, though, because HSL's lightness treats 50% as the "purest" point with black and white as symmetric extremes, while HSV's value is nearly maximized (96%) for this color since it's a fairly bright blue with no significant black mixed in — value only measures how far from black a color is, not how far from white.
What each channel means, in plain terms
Value answers the question "how much light is this color emitting, ignoring hue and saturation" — a value of 100% means the color is as bright as that hue and saturation combination can be; a value of 0% is always black, regardless of hue or saturation, since there's no light to see any color in at all. Saturation in HSV measures how far the color is from a pure gray at that same value — 0% saturation at any value is a shade of gray, and 100% saturation is the fully vivid version of the hue. A color can have very high value but low saturation (a pale, washed-out color) or high saturation but low value (a deep, dark, saturated color) — the two channels are independent.
A worked calculation, briefly
Both HSL and HSV derive value/lightness and saturation from the same two numbers: the largest and smallest of the red, green, and blue channel values. For #3B82F6 (59, 130, 246), the max channel is blue at 246 and the min is red at 59. HSV's value is simply the max channel scaled to a percentage — 246 out of 255 is about 96%, matching the 96% value shown above. HSV's saturation compares the gap between max and min against the max itself: (246 − 59) ⁄ 246 ≈ 76%, again matching. HSL instead averages the max and min to get lightness — (246 + 59) ⁄ 2, scaled to a percentage, giving roughly 60% — and computes saturation relative to how far that average sits from the extremes, a different formula that produces HSL's 91% rather than HSV's 76% for the same color.
Choosing between HSL and HSV in practice
Neither model is more mathematically correct — they're both derived the same way from the same underlying RGB values, just parameterizing the "how light or dark" axis differently. HSL tends to be preferred in CSS and design-token systems because its lightness scale (0% black, 50% pure hue, 100% white) makes generating tints and shades through simple lightness adjustment intuitive. HSV tends to be preferred in image-editing and color-picker software because its value/brightness axis matches how a hue-saturation color wheel is usually drawn and manipulated interactively. Converting between the two when moving between a design tool and CSS is the main practical reason to reach for this converter.