RGB ↔ HSL Converter
Convert between RGB (Red, Green, Blue) and HSL (Hue, Saturation, Lightness). Edit either side and the other updates instantly.
About RGB ↔ HSL Conversion
HSL (Hue, Saturation, Lightness) is an alternative way to describe a color that maps more closely to how humans perceive color. Instead of specifying intensities of red, green, and blue primaries, HSL lets you choose a hue angle, then adjust how vivid (saturated) and how light or dark the color is.
RGB to HSL Formula
Normalize the channels: \( r' = R/255,\ g' = G/255,\ b' = B/255 \). Let \( M = \max(r',g',b') \), \( m = \min(r',g',b') \), \( \delta = M - m \).
Lightness: \[ L = \frac{M + m}{2} \]
Saturation: \[ S = \begin{cases} 0 & \delta = 0 \\ \dfrac{\delta}{1 - |2L-1|} & \text{otherwise} \end{cases} \]
Hue: \[ H = \begin{cases} 0 & \delta = 0 \\ 60 \cdot \dfrac{g'-b'}{\delta} \bmod 6 & M = r' \\ 60 \cdot \left(\dfrac{b'-r'}{\delta}+2\right) & M = g' \\ 60 \cdot \left(\dfrac{r'-g'}{\delta}+4\right) & M = b' \end{cases} \]
HSL to RGB Formula
Given \( H \in [0°,360°] \), \( S \in [0,1] \), \( L \in [0,1] \):
\[ C = (1 - |2L-1|) \cdot S \qquad X = C \cdot \left(1 - \left|\frac{H}{60} \bmod 2 - 1\right|\right) \qquad m = L - C/2 \]
The pre-lightness-adjusted RGB \((R_1, G_1, B_1)\) is determined by which 60° sector H falls in, then the final value is \( (R_1+m, G_1+m, B_1+m) \times 255 \).
Frequently Asked Questions
When should I use HSL instead of RGB?
HSL is much more intuitive for adjusting colors programmatically. Want a lighter version of a color? Increase L. More vivid? Increase S. Shift the hue by 30°? Add 30 to H. These operations are awkward to express in RGB.
What is the difference between HSL and HSV?
Both share the same hue calculation. The difference is in how the third channel works: in HSL, full-saturation color at L=0.5 is the pure hue; at L=0 it's black and L=1 it's white. In HSV, pure hue is at S=1, V=1; V=0 is always black. HSV can't represent white except through desaturation.
Does CSS support hsl() directly?
Yes. hsl(213, 60%, 53%) is valid CSS. Modern CSS also supports hsl(213deg 60% 53%) and hsl(213 60% 53% / 50%) for transparency.
Why can the same RGB convert to hue = 0 for both red and achromatic colors?
When a color is perfectly achromatic (R=G=B), \(\delta = 0\) so saturation is 0 and hue is undefined — it's conventionally set to 0°. This is expected; the hue of white, gray, or black has no meaning.