HSL ↔ HSV / HSB Converter
Convert directly between HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) without going through RGB. Hue is always identical in both models; only the saturation and brightness axes differ.
About HSL ↔ HSV Conversion
Both HSL and HSV share the same hue angle (the H channel is identical) — they differ only in how they model the lightness/darkness axis. Because of this, it's possible to convert between them directly without first converting to RGB.
HSL to HSV Formula
Given \( H \in [0°,360°] \), \( S_L \in [0,1] \), \( L \in [0,1] \):
\[ V = L + S_L \cdot \min(L,\ 1-L) \]
\[ S_V = \begin{cases} 0 & V = 0 \\ 2\left(1 - \dfrac{L}{V}\right) & \text{otherwise} \end{cases} \]
Hue \(H\) is unchanged.
HSV to HSL Formula
Given \( H \in [0°,360°] \), \( S_V \in [0,1] \), \( V \in [0,1] \):
\[ L = V\left(1 - \frac{S_V}{2}\right) \]
\[ S_L = \begin{cases} 0 & L = 0 \text{ or } L = 1 \\ \dfrac{V - L}{\min(L,\ 1-L)} & \text{otherwise} \end{cases} \]
Intuition for the Difference
Think of HSL as a double cone: black at the bottom point, white at the top point, and the pure hue ring sitting at the middle (L=0.5). HSV is a single cone: black at the bottom point, and the top face is a circle where the edge is full saturation and the center is white (V=1, S=0). The formulas above translate between the two cone geometries.
Frequently Asked Questions
Which format should I use in CSS?
CSS uses HSL. The hsl() and hwb() functions are supported natively. HSV is not a CSS format — you'd need to convert to HSL or RGB before using in CSS.
Why does halving the saturation in HSL not give the same result as halving it in HSV?
Because saturation means different things in each model. In HSL, \(S_L\) measures distance from neutral relative to the lightness-scaled maximum. In HSV, \(S_V\) measures distance from neutral relative to brightness. Numerically halving one does not correspond to halving the other.
Do HSL and HSV always produce the same hue for the same color?
Yes — the hue angle is derived from the same RGB relationship in both models and is identical. It's only \(S\) and the third channel where they diverge.