Color · Hue, saturation, value/brightness
HSV / HSB color
Hue, saturation and value — the model behind most color pickers.
Key facts
| Channels | Hue, saturation, value/brightness |
|---|---|
| Value definition | Maximum of R, G, B |
| Hue | 0–360 degrees |
| Saturation | 0–1 or 0%–100% |
| CSS support | None |
| Common use | Color pickers and graphics tools |
HSL versus HSV
Both share hue and saturation, but the third channel differs. In HSV, value 100% means the brightest possible version of the hue, regardless of how much white is mixed in. In HSL, lightness 100% is always white. This is why a picker showing a bright red can report HSL lightness below 50%.
Why pickers use it
A square or triangle picker maps saturation and value directly: drag right for more color, up for more brightness. That interaction is intuitive and maps cleanly to the model, which is why HSV/HSB dominates UI color pickers even though CSS does not support it.
Frequently asked questions
Is HSB the same as HSV?
Yes. Brightness and value are the same channel under different names.
Can I use HSV in CSS?
Not directly. Convert to RGB, HSL or hex before using it in a stylesheet.
Why does HSV saturation differ from HSL saturation?
They are computed against different references: HSL saturation is relative to lightness, HSV saturation is relative to value.