Convertir une couleur RVB ou TSL avec Javascript

Dans l'espace RVB, les couleurs R,V et B sont exprimées dans la plage [0,255]. Certains logiciels peuvent cependant exprimer ces couleurs dans la plage [0,1]. Dans cet espace, il existe environ 16 millions de couleurs (255x 255x255) et chacune d'elle résulte de la combinaison des trois composantes Rouge, Vert et Bleu.

L'espace de couleurs TSL (Teinte, Saturation et Luminosité) correspond davantage à la perception visuelle de l'être humain. Certains logiciels peuvent représenter T, S et L dans la plage continue [0,1]. Certains logiciels peuvent représenter T dans la plage [0,360]. Paint représente T, S et L dans les plages [0,240[, [0,240] et [0,240].

La conversion en TSL d'une couleur exprimée en RVB et la conversion en RVB d'une couleur exprimée en TSL, peuvent s'effectuer à l'aide d'un logiciel, comme Paint par exemple. Ces conversions obéissent à des formules mathématiques particulières (cf http://fr.wikipedia.org, voir RVB et TSL)

Pour réaliser des programmes qui effectuent ces conversions il faut :
1) Préciser l'algorithme de conversion;
2) Rédiger les programmes correspondant, en Javascript par exemple.

L'algorithme de conversion RVB-TSL

L' algorithme suivant s'inspire d'informations trouvées sur wikipedia.

Les cas possibles sont :

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

L'algorithme utilisé est :

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)] si L>120
S = 240*(M-m)/(M+m) Sinon
L = 240(M+m)/510
exemples :
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)] si L>120
S = 240*(M-m)/(M+m) Sinon
L= 240(M+m)/510
exemples :
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)] si L>120
S = 240*(M-m)/(M+m) Sinon
L= 240(M+m)/510
exemple :
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)] si L>120
S = 240*(M-m)/(M+m) Sinon
L= 240(M+m)/510

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

CAS 6: B=R>V
M=B;m=V
T=200
S = 240*(M-m)/[510-(M+m)] si L>120
S = 240*(M-m)/(M+m) Sinon
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)] si L>120
S = 240*(M-m)/(M+m) Sinon
L= 240(M+m)/510
exemple :
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)] si L>120
S = 240*(M-m)/(M+m) Sinon
L= 240(M+m)/510
exemple :
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)] si L>120
S = 240*(M-m)/(M+m) Sinon
L= 240(M+m)/510
exemple :
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)] si L>120
S = 240*(M-m)/(M+m) Sinon
L= 240(M+m)/510
exemple :
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)] si L>120
S = 240*(M-m)/(M+m) Sinon
L= 240(M+m)/510
exemple :
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)] si L>120
S = 240*(M-m)/(M+m) Sinon
L= 240(M+m)/510
exemple :
RVB=(200,150,100); M=200; m=100
T=40*50/100=20; S=240*100/210=114; L=141

La conversion de RVB vers TSL

Le lien suivant ouvre une page qui contient un outil permettant de convertir une couleur RVB en une couleur TSL. Le programme source correspondant est écrit en Javascript. Le texte source peut être obtenu en cliquant "Affichage/Source", depuis Internet Explorer.
Convertir une couleur RVB en TSL, avec Javascript

La conversion de TSL vers RVB

Pour trouver les valeurs RVB à partir des valeurs TSL il suffit d'utiliser l'algorithme inverse, en identifiant bien tous les cas possibles. A partir de la luminosité L et de la saturation S, on déduit la composante de couleur qui a la plus forte valeur, et celle qui a la plus faible. Puis, à l'aide de la teinte T on déduit la valeur de la composante intermédiaire. Le code source correspondant, écrit en javascript, se trouve dans la page suivante :
Convertir une couleur TSL en RVB, avec Javascript