Qu'est-ce que le convertisseur HSL vers RGB ?
Cet outil convertit une couleur exprimée dans le modèle HSL — teinte (Hue), saturation (Saturation) et luminosité (Lightness) — vers le modèle RGB utilisé par les écrans, le CSS et les fichiers image. Le modèle HSL est apprécié des designers car il sépare la « couleur » elle-même (la teinte) de son intensité (la saturation) et de sa clarté (la luminosité), tandis que le RGB décrit la même couleur sous forme de quantités de lumière rouge, verte et bleue. La conversion est exacte et fonctionne pour n'importe quelle valeur HSL valide.
Comment l'utiliser
Indiquez la teinte en degrés (0 à 360), la saturation en pourcentage (0 à 100) et la luminosité en pourcentage (0 à 100). Le calculateur renvoie les valeurs rgb(r, g, b) correspondantes, chacune comprise entre 0 et 255, ainsi qu'un aperçu de couleur en temps réel pour vérifier le résultat d'un simple coup d'œil.
La formule expliquée
On commence par ramener la saturation et la luminosité dans l'intervalle 0–1. Le chroma vaut \(C = (1 - |2L - 1|)\,S\) et représente l'intensité de la couleur obtenue. Une valeur intermédiaire \(X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)\) gère la transition à l'intérieur de chaque secteur de teinte de 60°, et \(m = L - \tfrac{C}{2}\) décale l'ensemble pour respecter la luminosité demandée. Selon le secteur de 60° dans lequel tombe la teinte, les valeurs C, X et 0 sont attribuées à R, G et B dans un ordre précis ; on ajoute ensuite m, puis chaque canal est multiplié par 255 et arrondi.
$$C = (1 - |2L - 1|)\,S,\quad X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right),\quad m = L - \tfrac{C}{2}$$$$(R,G,B) = \big((R'+m)\cdot 255,\ (G'+m)\cdot 255,\ (B'+m)\cdot 255\big)$$
Exemple détaillé
Pour HSL(210°, 50 %, 50 %) : \(S = 0{,}5\) et \(L = 0{,}5\).
$$C = (1 - |0|)\cdot 0{,}5 = 0{,}5$$\(H/60 = 3{,}5\), donc \((3{,}5 \bmod 2) = 1{,}5\) et
$$X = 0{,}5\cdot(1 - |1{,}5 - 1|) = 0{,}25$$$$m = 0{,}5 - 0{,}25 = 0{,}25$$
La teinte 210° se trouve dans le secteur 3 (180–240°), ce qui donne \((R', G', B') = (0,\ X,\ C) = (0,\ 0{,}25,\ 0{,}5)\). En ajoutant m puis en multipliant par 255 : \(R = 64\), \(G = 128\), \(B = 191\) → rgb(64, 128, 191).
FAQ
Quels intervalles utilisent les champs de saisie ? La teinte va de 0 à 360 degrés ; la saturation et la luminosité s'expriment de 0 à 100 pour cent.
Pourquoi les valeurs sont-elles arrondies ? Les canaux RGB doivent être des nombres entiers compris entre 0 et 255 : le résultat calculé est donc arrondi à l'entier le plus proche.
Peut-on obtenir du gris ? Oui — réglez la saturation à 0 avec n'importe quelle teinte, et R, G et B seront tous égaux à la valeur de luminosité ramenée à l'échelle 0–255.
