HSV / HSB Colors Explained: Hue, Saturation, Value
HSV (also called HSB) describes color as Hue (0–360° wheel angle), Saturation (0% gray → 100% vivid) and Value (0% black → 100% full brightness). It models how painters think: start with a pigment (hue), add white to desaturate, add black to darken. That's why Photoshop, Figma and virtually every design-tool picker is an HSV square: horizontal = saturation, vertical = value, with a hue slider alongside.
HSV vs HSL — the one difference that matters
| HSV | HSL | |
|---|---|---|
| Top of the scale | V=100%: the pure vivid color | L=100%: white |
| White is at | S=0%, V=100% | L=100% (any S) |
| Used by | Design-tool pickers | CSS hsl() |
| Mental model | Painter mixing pigment | Symmetric black↔white axis |
Neither is perceptually uniform — a yellow and a blue with identical S and V do not look equally bright. For perceptual work use OKLCH.
Practical uses
HSV shines for picking (the square maps cleanly to intuition) and for programmatic variation in creative coding. Converters: HSV to RGB, HSV to HEX, RGB to HSV. Note CSS has no hsv() function — convert to HSL or HEX for the web.