Aller au contenu principal
ToolsByUs

Convertir HSL en HEX

HSL vers HEX transforme un angle de teinte, une saturation et une luminosité en couleur hexadécimale. La saturation et la luminosité fixent la distance à laquelle la couleur s’éloigne du gris ; l’angle de teinte décide dans quel secteur de 60° de la roue elle tombe, donc quel canal est le plus grand. Les trois canaux ressortent comme des valeurs 0–255 et chacun devient deux chiffres hexadécimaux.

100 % local
Entrée HSL

Saisissez une couleur à gauche. Les valeurs hexadécimales avec ou sans dièse sont acceptées, rgb(), hsl(), oklch() ainsi que les noms de couleurs CSS.

Comment fonctionne Convertir HSL en HEX ?

La conversion se déroule en trois étapes. Le chroma — la distance entre la couleur et le gris — vient de la saturation et de la luminosité ensemble : (1 − |2L − 1|) × S. Ce facteur est ce qui fait rétrécir le chroma vers les deux extrémités, car une couleur à 5% ou 95% de luminosité a très peu de place pour être colorée.

Le secteur décide quel canal gagne

Divisez la teinte par 60 et vous tombez dans l’un des six secteurs. Chaque secteur a un schéma fixe : un canal au chroma maximal, un à zéro, et un qui progresse entre les deux selon l’avancement dans le secteur. À 32°, vous êtes un peu au-delà de la mi-chemin du rouge vers le jaune, donc le rouge est au chroma maximal, le vert en vaut 0.53, et le bleu vaut zéro — c’est l’orange en haut de cette page.

Puis la luminosité déplace l’ensemble

Les trois valeurs obtenues jusqu’ici décrivent la couleur à sa saturation maximale. Ajouter L − chroma / 2 à chacune décale l’ensemble vers le haut ou le bas jusqu’à la luminosité demandée, sans changer les écarts entre eux — c’est ce qui garde la teinte constante quand la luminosité varie.

Pourquoi tous les hex ne sont pas atteignables depuis tous les HSL

Vous le pouvez, en fait : HSL et sRGB décrivent exactement le même ensemble de couleurs et l’application est une bijection. Ce que vous ne pouvez pas faire, c’est retrouver les mêmes nombres HSL après un aller-retour, car le hex dispose de 16,7 millions de valeurs et le HSL tel qu’on l’écrit d’ordinaire — une teinte en nombre entier et un dixième de pour cent — en a moins. Deux valeurs HSL voisines peuvent s’arrondir au même hex, et reconvertir ce hex donne celle des deux que produit la formule. Si l’exactitude compte, gardez le hex.

Un avertissement sur la construction d’échelles de cette façon

Un schéma très répandu consiste à prendre une couleur de marque, à la convertir en HSL, puis à générer une palette en faisant descendre la luminosité de 95% à 10%. Cela produit des nombres réguliers et des couleurs irrégulières : la luminosité HSL pondère les trois canaux à égalité, et l’œil, non, si bien que les jaunes de la gamme paraissent bien plus clairs que les bleus au même nombre. Si c’est cela que vous êtes venu faire, générez plutôt l’échelle en OKLCh — c’est ce que fait le sélecteur de couleurs de ce site, et les paliers ressortent aussi réguliers qu’ils se mesurent.

Teinte, saturation, luminosité

hsl(32 100% 50%)

La couleur hexadécimale

#ff8800

chroma      = (1 − |2 × 0.5 − 1|) × 1.00 = 1.000
sector      = 32 / 60 = 0.53   (red → yellow)
channels    = 1.000, 0.533, 0.000
→ 255, 136, 0  →  ff 88 00

Quelles options et quels cas limites Convertir HSL en HEX prend en charge ?

Référence technique et options
ParamètreTypeValeur par défautComportement et cas limites
hsl(32 100% 50%)moderneespacesLa syntaxe CSS actuelle. L’unité de teinte est optionnelle ; 32 et 32deg sont identiques.
hsl(32, 100%, 50%)héritéevirgulesToujours valide partout. Pas obsolète, et aucune raison de la réécrire.
hsla(…)alias—La même fonction que hsl(), qui prend désormais directement l’alpha.
Teintetout nombreboucle370 devient 10, et −30 devient 330. L’angle est modulaire, donc les valeurs hors limites sont valides plutôt que des erreurs.
Saturation 0%—grisProduit un gris à la luminosité donnée, quelle que soit la teinte définie.
Luminosité 0% / 100%—noir / blancLes deux réduisent chaque teinte et saturation à la même couleur.
Alpha0–1 ou %1Ajouté comme quatrième paire hexadécimale. 0.5 devient 80.
Hors limites—limitéLa saturation et la luminosité sont limitées à 0–100 plutôt que rejetées, comme le fait CSS.

Questions fréquentes

Comment convertir du HSL en hex à la main ?

Calculez le chroma comme (1 − |2L − 1|) × S, avec L et S en fractions. Divisez la teinte par 60 pour trouver le secteur, et calculez le canal intermédiaire comme chroma × (1 − |(hue/60 mod 2) − 1|). Attribuez le chroma, cette valeur intermédiaire et zéro au rouge, au vert et au bleu selon le secteur, ajoutez L − chroma/2 aux trois, multipliez par 255, puis écrivez chacun en deux chiffres hexadécimaux.

hsl(32 100% 50%) donne-t-il toujours le même hex ?

Oui. La conversion est déterministe et identique dans tous les navigateurs et tous les outils ; hsl(32 100% 50%) fait #ff8800 partout. Ce qui n’est pas garanti, c’est le retour — reconvertir #ff8800 peut donner une teinte de 31.9 selon la façon dont l’outil arrondit, car le hex contient plus de valeurs distinctes qu’une teinte en nombre entier.

Pourquoi changer la luminosité en HSL semble-t-il aussi changer la teinte ?

Cela ne change pas le nombre de teinte, mais cela change ce que vous voyez, parce que l’axe de luminosité du HSL n’est pas perceptuel. Passer de 50% à 70% de luminosité sur un bleu paraît un bien plus petit changement que le même passage sur un jaune, si bien qu’un ensemble de couleurs qui partagent un même nombre de luminosité ne semble pas partager une même luminosité. Travailler en OKLCh supprime entièrement cet effet.

Quelle est la bonne façon de construire une échelle de couleurs à partir d’une valeur HSL ?

Pas en progressant sur la luminosité HSL, qui est le conseil habituel et produit des paliers visiblement irréguliers. Convertissez en OKLCh, faites varier sa luminosité sur une courbe, gardez la teinte, et atténuez le chroma aux deux extrémités pour que les paliers clairs ne soient pas fluorescents et que les sombres ne brillent pas. Le sélecteur de couleurs de ce site fait exactement cela et vous remettra les onze valeurs et les variables CSS.

Puis-je écrire une teinte au-dessus de 360 ou en dessous de 0 ?

Oui, et CSS l’accepte. L’angle de teinte est modulaire, donc 370deg vaut 10deg et −30deg vaut 330deg. C’est réellement utile dans une animation ou une palette générée, où un angle est incrémenté et où vous préférez ne pas écrire vous-même le retour à zéro.

Pourquoi un autre convertisseur me donne-t-il un hex différent d’un chiffre ?

L’arrondi. Le HSL est continu et chaque canal hexadécimal n’a que 256 pas, donc un canal qui tombe sur 127.5 doit basculer d’un côté ou de l’autre ; ce convertisseur arrondit au plus proche, et un outil qui tronque au lieu d’arrondir tombe un cran plus bas. Les deux couleurs sont indiscernables à l’écran — l’écart vaut 1/255 d’un canal — mais ce ne sont pas les mêmes chaînes.

Équipe ToolsByUs · Comment nous vérifions nos outils