Converting a color RGB or HSL with javascript

In RGB space (RVB in french), the colors R, G and B are expressed in the range [0,255]. Some software however, can express these colors in the range [0,1]. In this space, there are approximately 16 million colors (255x 255x255) and each of them is resulting from the combination of the three components Red, Green and Blue.

The HSL color space (Hue, Saturation and Lightness) (TSL in french) is closer to perception Visual humans.Some software represent T, S and L in the continuous range [0,1]. Some software represent T in the range [0,360]. Paint represents T, S and L in the ranges [0,240], [0,240] and [0,240].

The conversion in TSL of a color expressed in RGB and the conversion in RGB of a color expressed in HSL can be done using software like Paint for example, as we have seen previously. These conversions are calculated with specific mathematical formulas (cf http://fr.wikipedia.org, see RGB and TSL).

To make programs that performs these conversions, we must :
1) Define the conversion algorithm;
2) Write the corresponding programs, in JavaScript for example.

The algorithm for converting RVB-HSL

The following algorithms are based on information found on wikipedia.

The possibles cases are following :

0: R=V=B
1: R=V<B
2: R=V>B
3: V=B<R
4: V=B>R
5: B=R<V
6: B=R>V
7: R<V<B
8: R<B<V
9: V<R<B
10:V<B<R
11: B<R<V
12: B<V<R

The used algorithm is :

R, V et B Є [0,255]
r, v, b Є [0,1] (r=R/255; v=V/255; b=B/255;)
t Є [0,360[
s, l Є [0,1]
T Є [0, 240[
S e Є [0,240]
L Є [0,240]
m=Min(R,V,B)
M=Max(R,V,B)

CAS 0 : R=V=B
T=160
S=0
L= int(240*R/255)

CAS 1 : R=V<B
M=B;m=R
T = 160
S = 240*(M-m)/[510-(M+m)] if L>120
S = 240*(M-m)/(M+m) else
L = 240(M+m)/510
examples :
RVB=(100,100,200); M=200; m=100
T=160; S=240*100/210=114;L=141
RVB=(20,20,200); M=200;m=20
T=160; S=240*180/220=196; L=103.52 =104

CAS 2: R=V>B
M=R;m=B
T=40
S = 240*(M-m)/[510-(M+m)] if L>120
S = 240*(M-m)/(M+m) else
L= 240(M+m)/510
examples :
RVB=(20,20,10);M=20;m=10
T=40;S=240*10/30=80 ;L=14
RVB=(200,200,150); M=200; m=150
T=40; S=240*50/160=75 ; L=165

CAS 3: V=B<R
M=R;m=V
T=0
S = 240*(M-m)/[510-(M+m)] if L>120
S = 240*(M-m)/(M+m) else
L= 240(M+m)/510
example :
RVB=(220,200,200); M=220; m=200
T=0; S=240*20/90=53; L=198

CAS 4: V=B>R
M=R;m=V
T=120
S = 240*(M-m)/[510-(M+m)] if L>120
S = 240*(M-m)/(M+m) else
L= 240(M+m)/510

CAS 5: B=R<V
M=V;m=B
T=80
S = 240*(M-m)/[510-(M+m)] if L>120
S = 240*(M-m)/(M+m) else
L= 240(M+m)/510

CAS 6: B=R>V
M=B;m=V
T=200
S = 240*(M-m)/[510-(M+m)] if L>120
S = 240*(M-m)/(M+m) else
L= 240(M+m)/510

CAS 7: R<V<B
M=B;m=R
T= 160 + 40*(R-V)/(M-m)
S = 240*(M-m)/[510-(M+m)] if L>120
S = 240*(M-m)/(M+m) else
L= 240(M+m)/510
example :
RVB=(100,150,200); M=200; m=100
T=160-40*50/100=140; S=240*100/210=114; L=141

CAS 8: R<B<V
M=V;m=R
T= 80 + 40*(B-R)/(M-m)
S = 240*(M-m)/[510-(M+m)] if L>120
S = 240*(M-m)/(M+m) else
L= 240(M+m)/510
example :
RVB=(100,200,150); M=200; m=100
T=80+40*50/100=100; S=240*100/210=114; L=141

CAS 9: V<R<B
M=B;m=V
T= 160 + 40*(R-V)/(M-m)
S = 240*(M-m)/[510-(M+m)] if L>120
S = 240*(M-m)/(M+m) else
L= 240(M+m)/510
example :
RVB=(150,100,200); M=200; m=100
T=160+40*50/100=180; S=240*100/210=114; L=141

CAS 10: V<B<R
M=R;m=V
T= 240 + 40*(V-B)/(M-m)
S = 240*(M-m)/[510-(M+m)] if L>120
S = 240*(M-m)/(M+m) else
L= 240(M+m)/510
example :
RVB=(200,100,150); M=200; m=100
T=240-40*50/100=220; S=240*100/210=114; L=141

CAS 11: B<R<V
M=V;m=B
T= 80 + 40*(B-R)/(M-m)
S = 240*(M-m)/[510-(M+m)] if L>120
S = 240*(M-m)/(M+m) else
L= 240(M+m)/510
example :
RVB=(150,200,100); M=200; m=100
T=80-40*50/100=60; S=240*100/210=114; L=141

CAS 12: B<V<R
M=R;m=B
T= 40*(V-B)/(M-m)
S = 240*(M-m)/[510-(M+m)] if L>120
S = 240*(M-m)/(M+m) else
L= 240(M+m)/510
example :
RVB=(200,150,100); M=200; m=100
T=40*50/100=20; S=240*100/210=114; L=141

Converting from RGB to HSL

The following link opens a page that contains a tool to convert a RGB color in a HSL color. The corresponding source program is written in javascript. The source text can be obtained by clicking View/Source from Internet Explorer :
Converting a RGB color in HSL, with Javascript

Converting from HSL to RGB

To find the RGB values from the values TSL, we can simply use the inverse algorithm, taking care identifying all possible cases. With the luminosity (L) and the saturation (S), we can deduce the color component that has the highest value, and one that has the lowest. Then, using the color hue H (T in french) we deduce the value of the intermediate color component. The source code is in the following page, in javascript :
Converting a TSL color in RGB, with Javascript