HSL vs HSV — differences, a side-by-side table, and when to use each.
HSL and HSV are two cylindrical color models built on the same hue wheel. They look similar but their third axis — Lightness versus Value — changes how saturation and brightness behave, which is why design tools and CSS sometimes prefer one over the other.
HSL stands for Hue, Saturation, Lightness. Hue is the angle on the color wheel (0–360°), saturation is color intensity (0–100%), and lightness runs from 0% (black) through 50% (the pure, most vivid color) to 100% (white). CSS supports it natively with the hsl() function.
HSV stands for Hue, Saturation, Value (also called HSB, for Brightness). Hue and saturation match HSL's idea, but Value runs from 0% (black) to 100% (the brightest the color can be). At V=100% and S=0% you get white; at V=100% and S=100% you get the pure hue. Photoshop's color picker uses HSB.
| HSL | HSV | |
|---|---|---|
| Full name | Hue, Saturation, Lightness | Hue, Saturation, Value (Brightness) |
| Third axis | Lightness (0–100%) | Value / Brightness (0–100%) |
| Pure vivid color | At L = 50% | At V = 100%, S = 100% |
| White appears | At L = 100% (any hue) | At V = 100%, S = 0% |
| Black appears | At L = 0% | At V = 0% |
| Native CSS support | Yes — hsl() / hsla() | No (convert to HEX/RGB/HSL first) |
| Typical home | Web/CSS, generating tints & shades | Image editors & color pickers |
Reach for HSL when you write CSS (it's a native function), when you want symmetric tints and shades around a base color, or when "how light is this?" is the question you're actually asking. Adjusting lightness up and down is the intuitive way to build a web color scale.
Reach for HSV/HSB when you're picking colors in an image editor like Photoshop or GIMP, or when you want to crank a color to its most vivid version — max out Value and Saturation and you get the purest hue. It maps well to how color pickers are drawn.