Qu'est-ce qu'un convertisseur HSL vers hexadécimal ?
Cet outil transforme une couleur exprimée dans le modèle HSL — Teinte, Saturation et Luminosité (Hue, Saturation, Lightness) — en notation hexadécimale, celle qu'on utilise en CSS, dans les logiciels de design et le développement web. Le HSL est intuitif pour l'œil humain : la teinte choisit la couleur sur la roue chromatique, la saturation règle son intensité et la luminosité détermine si elle est claire ou foncée. Le format hexadécimal (par ex. #3F7FBF), lui, est celui que les navigateurs et les outils interprètent réellement.
Comment l'utiliser
Saisissez la teinte de 0 à 360 degrés, la saturation de 0 à 100 % et la luminosité de 0 à 100 %, puis récupérez le code hexadécimal obtenu, les valeurs de chaque canal RVB ainsi qu'un aperçu de couleur en direct. La conversion est universelle, fonctionne pour n'importe quelle couleur et ne nécessite aucun logiciel.
La formule expliquée
La conversion calcule d'abord le chroma \(C = (1 - |2L - 1|)\cdot S\), où S et L sont des fractions comprises entre 0 et 1. Une variable intermédiaire \(X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)\) gère le dégradé entre les couleurs primaires, et un décalage de luminosité \(m = L - \tfrac{C}{2}\) remonte le résultat à la bonne clarté. Selon le secteur de 60° dans lequel tombe la teinte, les canaux (R′,V′,B′) reçoivent les valeurs C, X ou 0. Chaque canal final vaut \(\text{round}((c' + m)\cdot 255)\), et la chaîne hexadécimale n'est rien d'autre que l'écriture sur deux chiffres hexadécimaux de R, V et B mises bout à bout.
$$\text{Hex} = \texttt{\#}\,\text{HH}_{R}\,\text{HH}_{G}\,\text{HH}_{B}$$ $$\text{où}\quad \left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right) \\ m &= L - \tfrac{C}{2} \\ (R,G,B) &= \text{round}\big((R^{\prime}+m,\,G^{\prime}+m,\,B^{\prime}+m)\cdot 255\big) \\ H &= \text{Hue},\quad S = \dfrac{\text{Sat}}{100},\quad L = \dfrac{\text{Light}}{100} \end{aligned} \right.$$
Exemple concret
Pour HSL(210, 50 %, 50 %) : \(S = 0{,}5\), \(L = 0{,}5\), donc \(C = (1 - |0|)\times 0{,}5 = 0{,}5\). \(H/60 = 3{,}5\), donc \((3{,}5 \bmod 2) = 1{,}5\) et \(X = 0{,}5\times(1 - |0{,}5|) = 0{,}25\). \(m = 0{,}5 - 0{,}25 = 0{,}25\). La teinte 210 se situe dans le secteur 3 (180–240), ce qui donne \((R',V',B') = (0, X, C)\). On obtient donc \(R = \text{round}(0{,}25\times 255) = 64\), \(V = \text{round}(0{,}5\times 255) = 128\), \(B = \text{round}(0{,}75\times 255) = 191\) → #4080BF.
FAQ
La teinte fait-elle le tour complet ? Oui — une teinte de 360 correspond au même rouge que 0, et l'outil ramène automatiquement n'importe quelle valeur dans l'intervalle 0–360.
Pourquoi mes canaux diffèrent-ils parfois de 1 ? L'arrondi à l'entier le plus proche peut décaler un canal de ±1 par rapport à d'autres outils qui tronquent la valeur ; l'arrondi reste le choix le plus exact.
Peut-on obtenir du gris ? Oui — mettez la saturation à 0 avec n'importe quelle teinte, et les trois canaux deviennent égaux à \(\text{round}(L\times 255)\), produisant un gris neutre.
