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.
The same color in both — a worked example
Kolorvia's brand violet #7F5AF0 is hsl(255, 83%, 65%) and, in HSV terms, roughly hsv(255, 62%, 94%). Same hue angle — hue is the one coordinate the models share — but different saturation and third-axis numbers, because each model measures "how far from white, black, and gray" differently. This is the practical trap: saturation is not portable. Copying S: 62 from a Photoshop-style HSB picker into a CSS hsl() function produces a visibly different color. When moving values between tools, convert through RGB or hex (any color page shows every notation side by side) rather than carrying digits across.
Converting between them
The models are algebraically linked: HSV's value is the maximum RGB channel, while HSL's lightness is the average of the maximum and minimum channels — and each renormalizes saturation to its own axis. The formulas fit on two lines, but there's rarely a reason to hand-convert: go through RGB, or read both from the converter.
Cheat sheet: which model for which job
- Writing CSS by hand; hover, focus, and disabled-state recipes → HSL. It's native to CSS and symmetric about 50% lightness.
- Building or reasoning about a graphical picker → HSV — the "most vivid color in the corner" layout is why every picker works this way (how pickers work).
- Generating scales, dark-mode ladders, or anything programmatic that must look even → neither: use OKLCH.
- Storage and interchange → hex/RGB, converting into the friendlier models only at edit time.
One more naming hazard
Photoshop's "B" (brightness) is HSV's V — it is not HSL lightness, despite both being the third letter. And CSS has no hsv() function at all, so any HSV value destined for a stylesheet must be converted first. Most "the color came out wrong" reports when porting a palette between tools trace back to one of these two mix-ups.