tomas.srna
10-24-2006, 07:27 PM
Hi.
I have a tutorial how to convert rgb to hsl. Could anyone write it in Javascript for me?
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.
Thanks
I have a tutorial how to convert rgb to hsl. Could anyone write it in Javascript for me?
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.
Thanks