Qu'est-ce que le convertisseur RGB vers HSL ?
Cet outil convertit une couleur exprimée dans le modèle RGB (Rouge, Vert, Bleu, chacun de 0 à 255) vers le modèle HSL (Teinte, Saturation, Luminosité). Le HSL est souvent plus intuitif pour les designers, car il sépare la teinte de la couleur de son intensité (saturation) et de sa clarté (luminosité). Cette conversion est universelle : elle ne dépend ni de l'appareil, ni du pays.
Comment l'utiliser
Saisissez les valeurs de rouge, de vert et de bleu de votre couleur, chacune comprise entre 0 et 255. Lancez le calcul pour obtenir le triplet HSL é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, de façon à le ramener entre 0 et 1. Soit max et min la plus grande et la plus petite de ces trois valeurs, et \(\Delta = \max - \min\). La luminosité vaut \(L = (\max + \min) / 2\). La saturation vaut \(S = \Delta / (1 - \lvert 2L - 1 \rvert)\), ou 0 lorsque \(\Delta = 0\) (un gris). La teinte est calculée à partir du canal le plus élevé, puis multipliée par 60° et ramenée dans l'intervalle 0–360°.
$$L = \frac{C_{\max} + C_{\min}}{2}, \quad S = \frac{C_{\max} - C_{\min}}{1 - \lvert 2L - 1 \rvert}$$$$\text{where}\quad \left\{ \begin{aligned} R^{\prime} &= \frac{\text{Red}}{255}, \;\; G^{\prime} = \frac{\text{Green}}{255}, \;\; B^{\prime} = \frac{\text{Blue}}{255} \\ C_{\max} &= \max(R^{\prime}, G^{\prime}, B^{\prime}), \;\; C_{\min} = \min(R^{\prime}, G^{\prime}, B^{\prime}) \end{aligned} \right.$$$$H = 60^{\circ} \times \begin{cases} \dfrac{G^{\prime} - B^{\prime}}{\Delta} \bmod 6 & C_{\max} = R^{\prime} \\[0.6em] \dfrac{B^{\prime} - R^{\prime}}{\Delta} + 2 & C_{\max} = G^{\prime} \\[0.6em] \dfrac{R^{\prime} - G^{\prime}}{\Delta} + 4 & C_{\max} = B^{\prime} \end{cases}$$
Exemple détaillé
Prenons le rouge tomate RGB(255, 99, 71). Après normalisation : \(R=1\), \(G=0{,}388\), \(B=0{,}278\). \(\max=1\), \(\min=0{,}278\), \(\Delta=0{,}722\).
$$L = \frac{1 + 0{,}278}{2} = 0{,}639 \to 63{,}9\,\%$$$$S = \frac{0{,}722}{1 - \lvert 2 \cdot 0{,}639 - 1 \rvert} = \frac{0{,}722}{0{,}722} = 1 \to 100\,\%$$Comme \(\max = R\),
$$H = 60 \times \frac{0{,}388 - 0{,}278}{0{,}722} = 60 \times 0{,}1525 \approx 9{,}13^{\circ}$$Résultat : hsl(9.13, 100%, 63.92%).
Foire aux questions
Pourquoi la saturation vaut-elle 0 pour les gris ? Lorsque les trois canaux sont égaux, \(\Delta = 0\) : il n'y a alors aucune information de couleur et la saturation n'est pas définie — par convention, on la fixe à 0.
Les valeurs H, S et L sont-elles arrondies ? L'affichage arrondit à deux décimales, mais les valeurs calculées conservent toute leur précision.
Puis-je faire la conversion inverse ? Oui — la conversion de HSL vers RGB est l'opération inverse, fondée sur le secteur de teinte et la chrominance.
