Qu'est-ce que la conversion RVB en TSL ?
Le modèle RVB définit une couleur en mélangeant trois lumières — Rouge, Vert et Bleu — chacune sur une échelle de 0 à 255. Le modèle TSL (en anglais HSL) décrit exactement la même couleur à l'aide de trois valeurs bien plus intuitives : la Teinte (la position de la couleur sur la roue chromatique, de 0 à 360°), la Saturation (son intensité, de 0 à 100 %) et la Luminosité (sa clarté ou son obscurité, de 0 à 100 %). Les designers privilégient souvent le TSL, car ajuster la luminosité ou la saturation correspond directement à « plus clair », « plus foncé », « plus vif » ou « plus gris ».
Comment utiliser ce convertisseur
Saisissez les valeurs Rouge, Vert et Bleu de votre couleur, chacune comprise entre 0 et 255. Le calculateur affiche instantanément le triplet TSL équivalent, prêt à être collé dans votre CSS sous la forme hsl(H, S%, L%).
La formule expliquée
On commence par normaliser chaque canal en le divisant par 255 pour obtenir des valeurs comprises entre 0 et 1. Notons max et min la plus grande et la plus petite de ces valeurs. La luminosité vaut \(L = (max + min) / 2\). Si max est égal à min, la couleur est une nuance de gris : la saturation et la teinte sont alors toutes deux nulles. Sinon, la saturation est égale à \((max - min) / (2 - max - min)\) lorsque \(L > 0{,}5\), et à \((max - min) / (max + min)\) lorsque \(L \le 0{,}5\). La teinte se calcule à partir du canal dont la valeur est maximale, puis se convertit en degrés (de 0 à 360).
$$L = \frac{C_{max} + C_{min}}{2}, \quad S = \begin{cases} \dfrac{\Delta}{2 - C_{max} - C_{min}} & L > 0.5 \\[0.6em] \dfrac{\Delta}{C_{max} + C_{min}} & L \le 0.5 \end{cases}$$
$$\text{where}\quad \left\{ \begin{aligned} R &= \frac{\text{Red}}{255}, \; G = \frac{\text{Green}}{255}, \; B = \frac{\text{Blue}}{255} \\ C_{max} &= \max(R,G,B), \; C_{min} = \min(R,G,B), \; \Delta = C_{max} - C_{min} \end{aligned} \right.$$
$$H = 60^{\circ} \times \begin{cases} \left(\dfrac{G - B}{\Delta}\right) \bmod 6 & C_{max} = R \\[0.7em] \dfrac{B - R}{\Delta} + 2 & C_{max} = G \\[0.7em] \dfrac{R - G}{\Delta} + 4 & C_{max} = B \end{cases}$$
Exemple concret
Prenons le rouge tomate RVB(255, 99, 71) : valeurs normalisées = (1,0 ; 0,388 ; 0,278). max = 1,0, min = 0,278, donc \(L = 0{,}639 \to 63{,}9\,\%\). Comme \(L > 0{,}5\), \(S = (1{,}0 - 0{,}278) / (2 - 1{,}0 - 0{,}278) = 0{,}722 / 0{,}722 = 1{,}0 \to 100\,\%\). Le maximum correspond au rouge, donc \(H = 60 \times ((0{,}388 - 0{,}278) / 0{,}722) = 60 \times 0{,}1525 = 9{,}1^{\circ}\). Résultat : hsl(9, 100%, 64%).
Questions fréquentes
Pourquoi la teinte est-elle de 0 pour les gris ? Lorsque le rouge, le vert et le bleu sont égaux, aucune couleur ne domine : la teinte n'est donc pas définie et, par convention, on lui attribue la valeur 0.
Le TSL est-il identique au TSV (HSV/HSB) ? Non. Le TSL et le TSV partagent la même teinte, mais calculent différemment la saturation et la troisième composante ; cet outil renvoie des valeurs TSL.
Puis-je coller le résultat directement dans mon CSS ? Oui — les navigateurs modernes acceptent hsl(9, 100%, 64%) tel quel comme valeur de couleur.
