Qu'est-ce que le convertisseur HSL en RGB ?
HSL est l'acronyme de Hue, Saturation, Lightness, soit teinte, saturation et luminosité — une manière intuitive de décrire une couleur. La teinte correspond à un angle sur la roue chromatique (0-360°), la saturation à l'intensité (0-100 %) et la luminosité au caractère clair ou foncé de la couleur (0-100 %). Le modèle RGB décrit la même couleur à travers trois canaux — rouge (Red), vert (Green) et bleu (Blue) — chacun variant de 0 à 255, le format utilisé par les écrans, le CSS et les fichiers image. Ce convertisseur traduit une couleur HSL en son équivalent RGB exact.
Comment l'utiliser
Saisissez la teinte en degrés, la saturation en pourcentage et la luminosité en pourcentage. Le calculateur renvoie instantanément le triplet rgb(r, g, b) correspondant et affiche un aperçu en direct pour que vous puissiez vérifier la couleur d'un simple coup d'œil.
La formule expliquée
Convertissez d'abord S et L en fractions (0-1). Le chroma représente l'éclat de la couleur : $$C = (1 - |2L - 1|)\cdot S$$ La composante intermédiaire vaut $$X = C\,(1 - |(H/60 \bmod 2) - 1|)$$ et la valeur d'ajustement \(m = L - \tfrac{C}{2}\) décale l'ensemble vers la bonne luminosité. La teinte est répartie sur six secteurs de 60° ; chaque secteur attribue C, X et 0 aux canaux R, G et B dans un ordre précis. Enfin, ajoutez m à chaque composante puis multipliez par 255 (en arrondissant à l'entier le plus proche).
$$(R,G,B) = \big( (R_1+m)\cdot 255,\; (G_1+m)\cdot 255,\; (B_1+m)\cdot 255 \big)$$Exemple concret
Pour HSL(210°, 50 %, 60 %) : \(S = 0{,}5\), \(L = 0{,}6\). \(C = (1 - |1{,}2 - 1|)\times 0{,}5 = (1 - 0{,}2)\times 0{,}5 = 0{,}4\). \(H/60 = 3{,}5\), donc \(X = 0{,}4\times (1 - |3{,}5 \bmod 2 - 1|) = 0{,}4\times (1 - 0{,}5) = 0{,}2\). \(m = 0{,}6 - 0{,}2 = 0{,}4\). Le secteur 3 (\(\le H/60 < 4\)) donne \((R',G',B') = (0, X, C) = (0,\ 0{,}2,\ 0{,}4)\). On ajoute m : $$(0{,}4,\ 0{,}6,\ 0{,}8)\times 255 = \mathbf{(102, 153, 204)}$$
FAQ
Pourquoi mes valeurs RGB sont-elles arrondies ? Les canaux RGB sont des entiers compris entre 0 et 255 ; les valeurs mises à l'échelle sont donc arrondies à l'entier le plus proche.
Que donne une saturation de 0 % ? Une couleur entièrement désaturée est un gris dont la valeur ne dépend que de la luminosité — les trois canaux RGB sont alors identiques.
La teinte est-elle ramenée dans l'intervalle si je dépasse 360 ? Oui. La teinte est calculée modulo 360, donc 370° se comporte comme 10°.
