On this page
The same cylinder, sliced differently
Both HSL and HSV take the RGB cube and reshape it into a cylinder organized around hue — the angle from 0° to 360° around the color wheel. Both use saturation as the distance from the gray core. The difference is entirely in the vertical axis: HSL uses lightness, where the pure vivid hue sits in the middle at 50% and the top is always white; HSV uses value (also called brightness — Photoshop labels it HSB), where the pure vivid hue sits at the very top at 100%, and adding white means reducing saturation instead of increasing the vertical axis.
The one-line difference
In HSL, pure red is hsl(0, 100%, 50%). In HSV, pure red is hsv(0, 100%, 100%). Same color, different coordinates — because HSL treats "fully light" as white, while HSV treats "fully bright" as the most intense version of the hue.
When to reach for HSL
HSL is the one CSS supports natively, and its symmetry is genuinely useful for design systems: lightness 0% is always black, 100% is always white, and moving toward either end behaves predictably. That makes recipes like "hover state = same hue and saturation, lightness +10%" or "disabled state = drop saturation by half" easy to express. The palette generator on this site computes shades and tints exactly this way — holding hue and saturation fixed and walking lightness up or down.
When HSV shows up instead
HSV matches how painters think — start from the most vivid version of a hue, then mix in white (lower saturation) or black (lower value). That intuition is why nearly every graphical color picker, including the square-and-slider picker in this site's color converter, is an HSV interface: the square maps saturation left-to-right and value bottom-to-top, with the pure hue in the top-right corner. HSL in the same layout feels wrong, because its most vivid color hides in the vertical middle.
What neither model gets right
Both models inherit a flaw from their RGB roots: their axes are geometric, not perceptual. Two colors at HSL lightness 50% can differ wildly in how bright they actually look — pure yellow appears far lighter than pure blue at identical coordinates. For code that adjusts colors programmatically and needs the results to look even, a perceptually uniform space like OKLCH fixes this. For picking colors by hand, HSL and HSV remain perfectly good — just don't trust their lightness numbers as a measure of perceived brightness, and always verify real contrast ratios separately.