The conversion algorithms for these color spaces are originally from the book Fundamentals of Interactive Computer Graphics by Foley and van Dam (c 1982, Addison-Wesley). Chapter 17 describes color spaces and shows their relationships via easy-to-follow diagrams. NB this is a wonderful book, but if you are going to get a copy, I suggest you look for the latest edition.

RGB - HSL

  1. Convert the RBG values to the range 0-1
    Example: from the video colors page, colorbar red has R=83%, B=7%, G=7%, or in this scale, R=.83, B=.07, G=.07

  2. Find min and max values of R, B, G
    In the example, maxcolor = .83, mincolor=.07

  3. L = (maxcolor + mincolor)/2
    For the example, L = (.83+.07)/2 = .45

  4. If the max and min colors are the same (ie the color is some kind of grey), S is defined to be 0, and H is undefined but in programs usually written as 0

  5. Otherwise, test L.
    If L < 0.5, S=(maxcolor-mincolor)/(maxcolor+mincolor)
    If L >=0.5, S=(maxcolor-mincolor)/(2.0-maxcolor-mincolor)
    For the example, L=0.45 so S=(.83-.07)/(.83+.07) = .84

  6. If R=maxcolor, H = (G-B)/(maxcolor-mincolor)
    If G=maxcolor, H = 2.0 + (B-R)/(maxcolor-mincolor)
    If B=maxcolor, H = 4.0 + (R-G)/(maxcolor-mincolor)
    For the example, R=maxcolor so H = (.07-.07)/(.83-.07) = 0

  7. To use the scaling shown in the video color page, convert L and S back to percentages, and H into an angle in degrees (ie scale it from 0-360). From the computation in step 6, H will range from 0-6. RGB space is a cube, and HSL space is a double hexacone, where L is the principal diagonal of the RGB cube. Thus corners of the RGB cube; red, yellow, green, cyan, blue, and magenta, become the vertices of the HSL hexagon. Then the value 0-6 for H tells you which section of the hexgon you are in. H is most commonly given as in degrees, so to convert
    H = H*60.0
    If H is negative, add 360 to complete the conversion.

HSL - RGB

  1. If S=0, define R, G, and B all to L

  2. Otherwise, test L.
    If L < 0.5, temp2=L*(1.0+S)
    If L >= 0.5, temp2=L+S - L*S
    In the colorbar example for colorbar green, H=120, L=52, S=79, so converting to the range 0-1, L=.52, so
    temp2=(.52+.79) - (.52*.79) = .899

  3. temp1 = 2.0*L - temp2
    In the example, temp1 = 2.0*.52 - .899 = .141

  4. Convert H to the range 0-1
    In the example, H=120/360 = .33

  5. For each of R, G, B, compute another temporary value, temp3, as follows:
    for R, temp3=H+1.0/3.0
    for G, temp3=H
    for B, temp3=H-1.0/3.0
    if temp3 < 0, temp3 = temp3 + 1.0
    if temp3 > 1, temp3 = temp3 - 1.0
    In the example, Rtemp3=.33+.33 = .66, Gtemp3=.33, Btemp3=.33-.33=0

  6. For each of R, G, B, do the following test:
    If 6.0*temp3 < 1, color=temp1+(temp2-temp1)*6.0*temp3
    Else if 2.0*temp3 < 1, color=temp2
    Else if 3.0*temp3 < 2, color=temp1+(temp2-temp1)*((2.0/3.0)-temp3)*6.0
    Else color=temp1
    In the example,
    3.0*Rtemp3 < 2 so R=.141+(.899-.141)*((2.0/3.0-.66)*6.0=.141
    2.0*Gtemp3 < 1 so G=.899
    6.0*Btemp3 < 1 so B=.141+(.899-.141)*6.0*0=.141

  7. Scale back to the range 0-100 to use the scaling shown in the video color page
    For the example, R=14, G=90, B=14

    Color in video