Convertir un HSL en hex

Qu’est-ce que la conversion HSL vers hex ?

HSL décrit une couleur par trois réglages intuitifs : la teinte, un angle de 0 à 360 degrés sur le cercle chromatique ; la saturation, la vivacité de la couleur en pourcentage ; et la luminosité, sa clarté, également en pourcentage. Le hex, lui, l’encode en trois octets écrits en base seize — le format que presque toutes les feuilles de style, tous les éditeurs d’image et tous les systèmes de design attendent en définitive.

Le hex et le RGB sont rigoureusement la même information écrite différemment, donc une fois le hex obtenu, le RVB qui l’accompagne ne demande aucun calcul supplémentaire. HSL vers hex, en revanche, applique une vraie formule géométrique : c’est la direction qui referme la boucle après avoir choisi une couleur par sa teinte plutôt que par ses chiffres.

Cette conversion est la plus naturelle quand on part d’une intention plutôt que d’une valeur existante : « un bleu assez saturé, ni trop clair ni trop sombre », par exemple, se règle bien plus facilement en tournant une teinte et deux pourcentages qu’en devinant six chiffres hexadécimaux au hasard.

Comment convertir un HSL en hex

1. Réglez la teinte, la saturation et la luminosité. Utilisez les trois champs numériques, ou tapez directement une valeur comme hsl(212, 76%, 58%) dans le champ de texte.
2. Laissez la pastille et le hex se mettre à jour. Le résultat change à chaque frappe, sans bouton de validation ni fichier à envoyer.
3. Cliquez sur le hex pour le copier. La ligne « autres formats » donne aussi le RVB et le HSL, et deux liens mènent vers la couleur nommée la plus proche et vers le sélecteur de couleur complet.

À quoi sert cette conversion

HSL en hex sert dès que la couleur de départ existe d’abord dans votre tête ou sur un cercle chromatique, et qu’il faut lui donner un code exploitable. Beaucoup d’outils — variables CSS historiques, icônes SVG, chartes de couleurs, certains éditeurs graphiques — attendent un hex plutôt qu’un hsl() littéral, même quand la couleur a été choisie en tournant une teinte.

C’est aussi la conversion utile pour produire une série de nuances cohérentes : garder la même teinte et la même saturation, ne faire varier que la luminosité par paliers, puis convertir chaque palier en hex donne une palette de couleurs de marque prête à coller telle quelle dans une feuille de style ou un design system.

Les limites, honnêtement

Dans ce sens-ci, la conversion que vous obtenez est exacte pour les valeurs que vous avez saisies : entrez hsl(212, 76%, 58%) et le hex renvoyé correspond précisément à ce triplet, sans arrondi supplémentaire introduit par l’outil.

La prudence concerne le trajet inverse. Si quelqu’un reprend ensuite ce hex et le reconvertit en HSL, l’affichage arrondi peut ne pas retomber exactement sur les mêmes trois nombres : mesuré sur les 16 777 216 couleurs sRVB, faire l’aller-retour du hex vers le HSL arrondi puis de nouveau vers le hex ne redonne la couleur de départ que dans 10,58 % des cas — 1 775 570 couleurs sur 16 777 216. Les 89,42 % restants reviennent sur une couleur légèrement décalée.

Ce n’est pas une imprécision du calcul : un HSL arrondi à l’entier ne compte que 3 672 360 triplets possibles (360 teintes × 101 saturations × 101 luminosités) pour 16 777 216 couleurs sRVB, donc au moins 78,11 % des couleurs partagent forcément leur triplet HSL avec une autre. L’écart, quand il existe, reste petit : 54,38 % des couleurs ne dévient que d’une unité sur le canal le plus touché, 32,06 % de deux, et seulement 108 couleurs sur 16,7 millions de cinq — le pire cas mesuré, #02E4E6, revient en #02DFE3 après un aller-retour par hsl(181, 98%, 45%).

La transformation elle-même a été vérifiée face au module colorsys de Python, avec un accord total sur plus de 60 000 couleurs testées, et à pleine précision — sans arrondi à l’affichage — l’aller-retour est exact sur les 16 777 216 couleurs sRVB. Un cas à part : avec une saturation à 0 la couleur est un gris, et la teinte n’a plus aucun effet — n’importe quelle teinte donne le même code.

Pourquoi c’est gratuit

La conversion se calcule entièrement dans votre navigateur : aucune teinte ni aucun code couleur n’est envoyé à un serveur. Sans coût serveur, il n’y a rien à facturer, aucun compte à créer et aucune limite au nombre de conversions.

Il n’y a pas non plus de fichier produit, donc pas de filigrane possible — seulement une valeur hex à lire et à copier, autant de fois que nécessaire.