tomas.srna

10-24-2006, 08: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