Obtenez les composantes HSL à partir d’une couleur HEX

Avec HEX vers HSL, les designers et intégrateurs web peuvent ajuster une interface avant son intégration. Obtenez les composantes HSL à partir d’une couleur HEX.

Obtenez les composantes HSL à partir d’une couleur HEX. L’outil reste gratuit dans votre navigateur et ne demande aucun compte pour afficher le résultat.

Mode d’emploi

Saisissez un code couleur hexadécimal valide dans la zone prévue, par exemple sous la forme indiquée par l'interface.
Lancez la conversion pour obtenir les trois composantes HSL correspondantes, sans autre réglage nécessaire.
Lisez la teinte, la saturation et la luminosité, puis comparez-les avec la couleur d'origine dans votre maquette.
Copiez les valeurs HSL dans votre feuille de style ou votre outil de design, puis effacez la zone si vous partagez l'écran.

Exemple

Avec la couleur d'exemple, l'outil doit produire une teinte, une saturation et une luminosité cohérentes avec le code hexadécimal saisi. Regardez surtout la teinte et la luminosité avant d'adapter une palette ou un état de bouton.

Entrée

#16A34A

Résultat

hsl(142 76% 36%)

Limites et formats

L'outil convertit une couleur, mais il ne vérifie pas le contraste avec un texte ni l'accessibilité de la combinaison obtenue.
Il ne crée pas de palette, ne suggère pas de variantes et ne corrige pas un code hexadécimal invalide.
Les valeurs HSL affichées servent à la copie ; vérifiez leur format exact avant de les intégrer dans une bibliothèque ou un préprocesseur.

Où le traitement a lieu

La conversion est réalisée localement dans votre navigateur. Le code couleur saisi n'est envoyé nulle part et ne quitte pas votre appareil pendant l'opération.

Questions fréquentes

À quoi servent les valeurs HSL ?

HSL décrit une couleur par sa teinte, sa saturation et sa luminosité. Ces composantes sont pratiques pour ajuster progressivement une palette, créer des variantes ou expliquer une couleur dans une documentation.

Puis-je convertir plusieurs couleurs d'un coup ?

Non, l'outil traite la valeur présente dans la zone d'entrée. Pour comparer plusieurs couleurs, relancez la conversion avec chaque code l'un après l'autre.

Que faire si le résultat semble étrange ?

Vérifiez d'abord que le code hexadécimal est complet et correctement orthographié. Une valeur invalide ou incomplète ne peut pas être convertie en composantes HSL fiables.