HSL, HSB and HSV color: differences and conversion

If you are here you've probably heard of HSL, HSB or HSV color models. They are nothing more than transformations of RGB values. Simple equations are used to convert from RGB to HSL and HSV color. HSB is exactly the same as HSV, but HSL is slightly different as explained below. Because they are both based on RGB, they are also meant to be used to represent color in digital devices. This article explains the basic definitions involved (no previous knowledge on color theory is assumed) and shares the equations to convert between them.

Why did they bother creating color models that represent the same colors RGB already could? Although RGB is perfect for machines, it is not very human-friendly. HSL and HSV color models were created as a more convenient way for us to specify colors in software.

HSB / HSV color cilinder

H stands for Hue and S stands for Saturation in all cases. Hue is usually a number between 0 and 360 that represents the angle in the color wheel (a hue wheel, that is). The B in HSB stands for Brightness and the V in HSV for Value, which are exactly the same: the perception of the ammount of light or power of the source.

Both Saturation and Brightness/Value are given as a real number between 0 and 1 or as a percentage. Playing around with the HSB fields of a color picker is probably the easiest way to understand these intuitive concepts.

HSL cilinder

HSL is slightly different. Hue takes exactly the same numerical value as in HSB/HSV. However, S, which also stands for Saturation, is defined differently and requires conversion. L stands for Lightness, is not the same as Brightness/Value. Brightness is perceived as the "amount of light" which can be any color while Lightness is best understood as the amount of white. Saturation is different because in both models is scaled to fit the definition of brightness/lightness.

Because HSB/HSV and HSL are just representations of an RGB color model, it's useful to define their parameters in terms of RGB coordinates. Converting to and from RGB is straighforward using the simple equations provided.

Converting from RGB to HSB/HSV

To convert from RGB to HSB use:

H = \left\{\begin{array}{ll}undefined & \mbox{if } M-m = 0 \\\left(60 \frac{G-B}{M-m}\right)mod360 & \mbox{if } M = R \\60 \frac{B-R}{M-m} + 120 & \mbox{if } M = G \\60 \frac{R-G}{M-m} + 240 & \mbox{if } M = B\end{array}\right.


B = M


S_{HSB} = \frac{M-m}{B}

Where B and S_{HSB} are in the [0,1] range. M and m are the maximum and minimum of R,G and B respectively:

M = max(R,G,B)


m = min(R,G,B)

That is, take the maximum between R,G and B and divide it by 255 (normalize it) to get Brightness. If M-m = 0 the three RGB components are the same and we have a shade of gray so Hue is undefined. In software these colors could be assigned any Hue but usually zero (red) is asigned. mod360 is added for the case where G-B is negative, in which H should be 360 + G - B which is positive and represents the same position in the color wheel.

Converting from RGB to HSL

In HSL, Hue is defined in the same way as in HSB/HSV, Lightness is the average of the largest and smallest RGB components and saturation depends on Lightness:

H = \left\{\begin{array}{ll}undefined & \mbox{if } M-m = 0 \\\left(60 \frac{G-B}{M-m}\right)mod360 & \mbox{if } M = R \\60 \frac{B-R}{M-m} + 120 & \mbox{if } M = G \\60 \frac{R-G}{M-m} + 240 & \mbox{if } M = B\end{array}\right.


L = \frac{1}{2}(M+m)


S_{HSL} = \frac{M-m}{1-|2L-1|}

Converting between HSB/HSV and HSL

HSL to HSB and HSB to HSL equations are easy to derive from the equations above for HSL and HSB components in terms of R,G and B. Because M = B , from the equation for S_{HSB} we have m = M-BS_{HSB} . Substituting these into the RGB-to-HSL equations we get the equations to convert directly from HSB to HSL:

H_{HSL} = H_{HSB}


L = \frac{1}{2}B(2 - S_{HSB})


S_{HSL} = \frac{BS_{HSB}}{1-|2L-1|}

B and S values should be in the range [0,1].

The process described above for HSB/HSV to HSL color conversion is roughly the same for converting the other way around. The equations for converting from HSL to HSB/HSV color in the [0,1] range are:

H_{HSB} = H_{HSL}


S_{HSB} = \frac{2(B-L)}{B}


B = \frac{2L+S_{HSL}(1-|2L-1|)}{2}

8 comments

  1. Hi Jose, this is a great post. Short and to the point, and very helpful. Thanks alot! Doing photo editing I was really confused and thought hue and saturation was additional information to RGB. Now I get that they are the same thing on a different scale.

  2. I dont know if its my problem or all its working, maths aren't my best, but...
    I got s and b in the range 0-100, with this
    L=0.5*(b/100)*(2-s/100);
    I get the L in the range 0-1, L values in css are a percentage
    L=0.5*(b/100)*(2-s/100)*100;

    thanks anyway, that help me a lot.

  3. Converting between HSB/HSV and HSL
    S_{hsl} = (B*S_{hsb}) / (1-|2L-1|)
    L = .5*B(2 - S_{hsb})

    Question:
    in the equation for S_{hsl}, is the L so posed to be a B,
    or is the equation for L performed first?

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>