Qu'est-ce que le convertisseur Hex vers HSL ?
Cet outil transforme un code couleur hexadécimal (la fameuse notation #RRGGBB utilisée en CSS et dans les logiciels de design) en modèle colorimétrique HSL — Teinte (Hue), Saturation et Luminosité (Lightness). Le HSL est souvent plus intuitif que l'hexadécimal ou le RGB, car il décrit la couleur telle que nous la percevons : de quelle couleur il s'agit (teinte), à quel point elle est vive (saturation) et si elle est claire ou foncée (luminosité). Il fonctionne universellement pour toute couleur basée sur le RGB et n'est lié à aucun pays ni à aucune norme particulière, au-delà de la notation hexadécimale sRGB standard.
Comment l'utiliser
Saisissez une valeur hexadécimale telle que #3498DB. Vous pouvez conserver ou omettre le # initial, et une notation abrégée à trois chiffres comme #0AF est automatiquement développée en #00AAFF. Le convertisseur renvoie le triplet HSL équivalent ainsi que les valeurs décodées des canaux rouge, vert et bleu (0–255).
La formule expliquée
L'hexadécimal est d'abord décomposé en octets rouge, vert et bleu, chacun étant divisé par 255 pour le normaliser dans une plage de 0 à 1. Soit max et min la plus grande et la plus petite de ces trois valeurs. La luminosité correspond simplement à leur moyenne : \(L = \frac{\max + \min}{2}\). La saturation vaut 0 lorsque max est égal à min (un gris). Sinon, si \(L > 0{,}5\) alors \(S = \frac{\max - \min}{2 - \max - \min}\), sinon \(S = \frac{\max - \min}{\max + \min}\). La teinte dépend du canal qui constitue le maximum et est convertie en degrés en la multipliant par 60.
$$L = \frac{\max + \min}{2}, \quad S = \begin{cases} \dfrac{\max - \min}{2 - \max - \min}, & L > 0.5 \\[0.6em] \dfrac{\max - \min}{\max + \min}, & L \le 0.5 \end{cases}$$$$\text{where}\quad \left\{ \begin{aligned} (R,G,B) &= \frac{\text{RGB from }\text{Hex Color}}{255} \\ \max &= \operatorname{max}(R,G,B),\ \min = \operatorname{min}(R,G,B) \end{aligned} \right.$$$$H = 60^{\circ} \times \begin{cases} \dfrac{G - B}{d} \bmod 6, & \max = R \\[0.6em] \dfrac{B - R}{d} + 2, & \max = G \\[0.6em] \dfrac{R - G}{d} + 4, & \max = B \end{cases} \qquad d = \max - \min$$
Exemple concret
Prenons #3498DB : \(R = 52\), \(G = 152\), \(B = 219\). Normalisé : \(r \approx 0{,}2039\), \(g \approx 0{,}5961\), \(b \approx 0{,}8588\). \(\max = b = 0{,}8588\), \(\min = r = 0{,}2039\), donc \(L = 0{,}5314\) (53,14 %). Comme \(L > 0{,}5\), $$S = \frac{0{,}6549}{2 - 1{,}0627} = 0{,}6987 \ (69{,}87\,\%).$$ Le bleu étant le maximum, $$H = 60 \times \left(4 + \frac{0{,}2039 - 0{,}5961}{0{,}6549}\right) = 60 \times 3{,}4011 \approx 204{,}07^{\circ}.$$ Résultat : hsl(204, 70%, 53%).
FAQ
L'outil accepte-t-il la notation abrégée ? Oui — les codes à trois chiffres comme #F0C sont développés automatiquement.
Les valeurs HSL sont-elles exactes ? La teinte, la saturation et la luminosité sont calculées avec une précision maximale et ne sont arrondies que pour l'affichage ; les valeurs brutes sont également disponibles.
Le dièse est-il obligatoire ? Non, le convertisseur traite les valeurs avec ou sans le # initial.
