Le convertisseur accepte toutes les formes hex du CSS : le format 6 chiffres #3366cc, le format abrégé à 3 chiffres #36c, et les formats à 4 et 8 chiffres avec canal alpha, avec ou sans le #. Il affiche la chaîne hsl() ou hsla(), les valeurs brutes et un détail par composante, ainsi qu'une ligne inverse HSL vers HEX quand vous devez faire le chemin inverse. Tout s'exécute dans votre navigateur : pas d'envoi de fichier, pas de compte, pas de limite.
Convertisseur HEX vers HSL
Fonctionne entièrement dans votre navigateur : aucun envoi, aucune inscription.
CSS
hsl(220, 60%, 50%)Comment ça se convertit
Teinte220
Saturation60%
Luminosité50%
Dans l'autre sens ? HSL vers HEX
#3366ccComment convertir HEX en HSL ?
Lisez d'abord le code hex comme du rouge, du vert et du bleu (0-255), puis exprimez cette même couleur en teinte, saturation et luminosité. La teinte est l'angle sur la roue chromatique (0-360), la saturation indique à quel point la couleur est vive (0-100 %) et la luminosité, à quel point elle est claire (0-100 %). #3366cc devient hsl(220, 60%, 50%). Ce convertisseur le fait instantanément pendant que vous tapez.
Comment l’utiliser
- 1Entrez un code hex. Tapez ou collez une couleur hex comme #3366cc (ou #36c), ou choisissez-en une avec le sélecteur de couleur. Le # est facultatif.
- 2Lisez la valeur HSL. La chaîne hsl(), les valeurs brutes et un aperçu de couleur en direct se mettent à jour au fil de la frappe, avec un détail par composante pour la teinte, la saturation et la luminosité.
- 3Copiez le format dont vous avez besoin. Cliquez sur Copier à côté de la chaîne hsl() ou des valeurs brutes. Besoin du sens inverse ? Entrez la teinte, la saturation et la luminosité ci-dessous pour retrouver le code hex.
Pour qui
- Les développeurs front-end qui passent un code hex en hsl() pour ajuster la luminosité sur les états hover et focus sans avoir à choisir une toute nouvelle couleur.
- Les designers qui construisent une palette et gardent la teinte fixe en faisant varier saturation et luminosité pour obtenir des teintes plus claires ou plus sombres à partir d'une seule couleur de marque.
- Les personnes qui documentent des thèmes et des design tokens et stockent leurs couleurs en HSL parce que c'est bien plus facile à lire et à ajuster à la main qu'une chaîne hex.
- Toute personne qui doit faire correspondre des couleurs entre des outils où l'un demande du hex (Figma, la plupart du CSS) et l'autre du HSL (helpers SCSS, certains systèmes de couleur).
Questions fréquentes
Ce convertisseur HEX en HSL est-il gratuit ?
Oui, il est 100 % gratuit, sans inscription et sans limite. Il s'exécute entièrement dans votre navigateur.
Mes couleurs sont-elles envoyées quelque part ?
Non. La conversion est du JavaScript pur qui tourne sur votre appareil, rien n'est envoyé à un serveur, et l'outil continue de fonctionner hors ligne une fois la page chargée.
Qu'est-ce que le HSL ?
HSL signifie teinte (hue), saturation et luminosité (lightness). La teinte est un angle de 0 à 360 degrés sur la roue chromatique, la saturation va de 0 à 100 % selon la vivacité de la couleur, et la luminosité va de 0 % (noir) en passant par la couleur pure à 50 %, jusqu'à 100 % (blanc).
Comment convertir du hex en HSL à la main ?
Convertissez le hex en rouge, vert et bleu puis divisez chaque valeur par 255. Prenez le maximum et le minimum des trois : la luminosité est leur moyenne, la saturation est (max - min) divisé par (1 - |2L - 1|), et la teinte dépend du canal qui est le maximum, ramenée sur une échelle de 0 à 360 degrés.
Prend-il en charge le format abrégé à 3 chiffres comme #36c ?
Oui. Dans le format abrégé CSS, chaque chiffre est doublé, donc #36c devient #3366cc et se convertit en hsl(220, 60%, 50%). Le format à 4 chiffres fonctionne de la même façon, avec le dernier chiffre comme alpha.
Comment gère-t-il la transparence (HSLA) ?
Un code hex à 8 chiffres porte l'alpha dans sa dernière paire. Cet octet (0-255) est divisé par 255 pour obtenir l'alpha de 0 à 1 attendu par hsla(), arrondi à trois décimales : ainsi #3366cc80 devient hsla(220, 60%, 50%, 0.502).
Peut-il convertir HSL en HEX ?
Oui. Utilisez la ligne HSL vers HEX sous le résultat : entrez la teinte (0-360), la saturation et la luminosité (0-100 %), et il renvoie le code hex instantanément. Les valeurs hors plage sont ramenées dans l'intervalle autorisé.
Pourquoi utiliser le HSL plutôt que le hex ?
Le HSL se lit facilement : vous pouvez éclaircir une couleur en augmentant L, l'atténuer en baissant S, ou changer sa famille en modifiant H, le tout sans avoir à deviner des chiffres hex. C'est donc idéal pour construire des palettes cohérentes, des états hover et des design tokens.