Convertir un hex en HSL

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

Un code hex comme #4093E6 encode une couleur en trois octets écrits en base seize : un pour le rouge, un pour le vert, un pour le bleu. Le convertir en HSL ne change pas la couleur, il la redécrit avec trois autres nombres : une teinte (l’angle sur le cercle chromatique, de 0 à 360 degrés), une saturation et une luminosité, l’une et l’autre en pourcentage.

Le hex et le RGB sont la même information écrite deux fois : passer de l’un à l’autre est un simple changement de base, sans aucune perte, pour n’importe quelle couleur. HSL, en revanche, est une vraie transformation géométrique, et c’est elle qui rend cette conversion utile plutôt que cosmétique : elle sépare la teinte, la saturation et la luminosité, trois réglages qu’un code hex mélange inextricablement dans ses six chiffres.

Concrètement, convertir un hex en HSL revient à demander : à quel endroit du cercle chromatique se trouve cette couleur, à quel point est-elle vive, et à quel point est-elle claire ou sombre ? Une fois la réponse obtenue, ajuster l’un de ces trois réglages sans toucher aux deux autres devient un calcul simple plutôt qu’un tâtonnement sur des chiffres hexadécimaux.

Comment convertir un hex en HSL

1. Collez votre code hex dans le champ de texte. Il accepte 3, 4, 6 ou 8 chiffres, avec ou sans le # devant, exactement comme vous l’avez copié depuis votre charte graphique.
2. Regardez la pastille et la valeur HSL se mettre à jour. Le résultat s’affiche à chaque frappe, sans bouton à cliquer et sans rien à envoyer sur un serveur.
3. Cliquez sur la valeur HSL pour la copier. La ligne « autres formats » propose aussi le hex et le RVB en un clic, 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

Convertir un hex en HSL sert surtout quand vous partez d’une couleur de marque figée — celle de la charte graphique, celle du logo, celle que le client a validée — et que vous avez besoin d’une variante plus claire ou plus sombre : un état de survol, un fond très pâle pour une bannière, un texte plus foncé pour rester lisible sur blanc. En HSL, ce réglage tient dans un seul nombre, la luminosité, que l’on peut monter ou descendre sans toucher à la teinte ni à la saturation, alors que trouver une variante d’un hex à la main revient à deviner de nouveaux chiffres hexadécimaux au hasard.

C’est aussi la conversion qu’on fait pour construire une palette cohérente à partir d’une seule couleur de départ : garder la même teinte et la même saturation, et ne faire varier que la luminosité par paliers réguliers, produit une gamme de nuances qui restent visiblement de la même famille. Beaucoup de feuilles de style utilisent d’ailleurs hsl() directement dans leurs variables CSS, ce qui rend cette conversion utile même quand la couleur finale ne repasse jamais par un code hexadécimal.

Les limites, honnêtement

La transformation mathématique elle-même ne perd rien : convertir les 16 777 216 couleurs sRVB possibles en HSL à pleine précision, puis les reconvertir en hex, redonne la couleur de départ dans tous les cas — 0 échec sur 16 777 216. Le problème n’est pas le calcul, c’est l’affichage.

Comme tout convertisseur, celui-ci affiche la teinte et les pourcentages arrondis à l’entier, pour rester lisible. Or repartir de ce HSL arrondi et reconvertir vers le hex ne redonne la couleur de départ que pour 1 775 570 couleurs sur 16 777 216, soit 10,58 %. Les 15 001 646 autres — 89,42 % — reviennent sur une couleur légèrement différente.

Ce n’est pas un bug, et un simple calcul de dénombrement montre que ça ne peut pas en être un : un HSL arrondi à l’entier n’offre que 360 teintes × 101 saturations × 101 luminosités, soit 3 672 360 triplets distincts, pour 16 777 216 couleurs sRVB à représenter. Avec moins d’un quart d’étiquettes disponibles par couleur, au moins 78,11 % des couleurs sont forcément condamnées à partager leur étiquette avec une autre — le 89,42 % mesuré est cohérent avec ce plancher.

L’écart reste généralement faible : sur l’écart maximal entre les trois canaux, 54,38 % des couleurs ne dévient que d’une unité, 32,06 % de deux, 2,89 % de trois, 0,09 % de quatre, et seulement 108 couleurs sur 16,7 millions dévient de cinq. Le pire cas mesuré est #02E4E6, affiché comme hsl(181, 98%, 45%), qui reconverti redonne #02DFE3. Le calcul a par ailleurs été vérifié face au module colorsys de la bibliothèque standard de Python, avec un accord total sur plus de 60 000 couleurs testées. Pour une couleur grise, où rouge, vert et bleu sont égaux, la teinte n’a mathématiquement pas de sens : l’outil suit la convention et affiche 0. En pratique, utilisez le HSL affiché pour raisonner sur la couleur et l’ajuster, puis conservez le hex d’origine comme valeur de référence.

Pourquoi c’est gratuit

Toute la conversion se fait dans votre navigateur, en JavaScript : aucune couleur n’est envoyée à un serveur, il n’y a rien à téléverser et rien à attendre. Sans traitement serveur à payer, il n’y a aucune raison de faire payer l’outil, de demander un compte ou de poser une limite d’usage.

Pas de filigrane non plus, puisqu’il n’y a pas de fichier à produire : seulement des valeurs de couleur à lire et à copier, autant de fois que nécessaire.