Convertir HEX en HSL
HEX vers HSL convertit une couleur hexadécimale en teinte, saturation et luminosité. Les trois canaux sont ramenés à l’échelle 0–1, puis le plus grand et le plus petit d’entre eux produisent la réponse : la luminosité est leur point milieu, la saturation mesure leur écart, et la teinte dit quel canal est le plus grand et de combien. Le résultat est exact et réversible — mais la luminosité du HSL n’est pas celle que rapporte votre œil, ce qui vaut la peine de savoir avant de construire quoi que ce soit dessus.
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 HEX en HSL ?
Le HSL est un autre jeu de coordonnées pour les mêmes trois octets. Ramenez chaque canal à l’échelle 0–1, repérez le plus grand et le plus petit, et le reste s’ensuit : la luminosité est leur point milieu, le chroma est l’écart entre eux, et la teinte est déterminée par le canal le plus grand et par la position des deux autres par rapport à lui.
D’où vient le nombre de teinte
La roue est divisée en six secteurs de 60°, un par couleur primaire et secondaire. Si le rouge est le plus grand canal, vous êtes dans le secteur du rouge, et la position à l’intérieur est fixée par l’avance ou le retard du vert sur le bleu. Pour #ff8800 : le rouge est au maximum, le vert vaut 0.533, le bleu vaut 0, donc la teinte vaut (0.533 − 0) / 1 × 60 = 32°. Tous les calculs de teinte que vous avez déjà vus sont cela, écrit de façon plus compacte.
La saturation est relative, ce qui surprend
Un même chroma produit un nombre de saturation différent selon la luminosité, parce que le dénominateur change : c’est chroma / (1 − |2L − 1|). Une couleur très sombre ou très claire laisse peu de place au chroma, si bien qu’un petit écart absolu entre canaux se traduit par une saturation élevée. Voilà pourquoi #010200 ressort avec 100% de saturation — il est presque noir et, dans ce qui est possible à cette luminosité, il est aussi coloré que possible.
La luminosité HSL n’est pas la luminosité perçue
C’est le point à retenir. hsl(60 100% 50%) est jaune et hsl(240 100% 50%) est bleu, et le HSL affirme que tous deux sont à 50% de luminosité. Pour l’œil, l’un est presque blanc et l’autre presque noir. La formule pondère les trois canaux également, et l’œil, non — le vert contribue environ dix fois plus à la luminosité perçue que le bleu.
La conséquence pratique : une gamme de teintes construite en progressant sur la luminosité HSL a des paliers d’apparence inégale, si réguliers que soient les nombres, et une palette tournée à travers les teintes HSL ressort avec des couleurs criardes et d’autres invisibles. Si la valeur alimente une gamme, un mélange ou n’importe quel jugement de luminosité, utilisez OKLCH — il figure dans la sortie ci-dessous, et tous les navigateurs actuels l’acceptent en CSS.
Une couleur hexadécimale
#ff8800
Teinte, saturation, luminosité
hsl(32 100% 50%) max 255 / 255 = 1.000 (red) min 0 / 255 = 0.000 (blue) lightness = (1 + 0) / 2 = 50% chroma = 1 − 0 = 1.000 → saturation 100%
Quelles options et quels cas limites Convertir HEX en HSL prend en charge ?
| Paramètre | Type | Valeur par défaut | Comportement et cas limites |
|---|---|---|---|
| Teinte | 0–360deg | 0 = rouge | Position sur la roue chromatique. 120 est le vert, 240 est le bleu. La valeur est cyclique, donc 370 et 10 sont identiques. |
| Saturation | 0–100% | — | Chroma par rapport à ce que permet la luminosité actuelle. 0% est gris quelle que soit la teinte. |
| Luminosité | 0–100% | — | 0% est noir et 100% est blanc pour chaque teinte. 50% est le point où une teinte est la plus saturée. |
| Alpha | tout nombre | 1 | Indiqué après une barre oblique dans la syntaxe moderne : hsl(32 100% 50% / 50%). |
| hsl() vs hsla() | — | identique | hsl() accepte désormais la valeur alpha. hsla() est un alias hérité qui n’est pas obsolète. |
| Gris | S = 0 | — | Sans saturation, la teinte est arbitraire et ne porte aucune information. Elle est indiquée comme 0 ici plutôt que comme du bruit. |
| Aller-retour | exact | — | Le passage de Hex vers HSL et retour donne la même couleur. La formule est un changement de coordonnées, pas une approximation. |
| OKLCH | alternative | — | Même principe — un angle de teinte, un chroma et une luminosité — mais avec un axe de luminosité qui correspond à ce que l’œil perçoit. |
Questions fréquentes
Comment convertir du hex en HSL à la main ?
Convertissez le hex en trois canaux 0–255, divisez chacun par 255, puis prenez le plus grand et le plus petit. La luminosité vaut (max + min) / 2. Le chroma vaut max − min ; s’il est nul, la couleur est grise et vous avez terminé. Sinon, la saturation vaut chroma / (1 − |2L − 1|), et la teinte vient du canal le plus grand : le rouge donne ((G − B) / chroma) × 60, le vert donne ((B − R) / chroma + 2) × 60, le bleu donne ((R − G) / chroma + 4) × 60.
Pourquoi une couleur presque noire affiche-t-elle 100% de saturation ?
Parce que la saturation HSL est relative au chroma maximal disponible à cette luminosité, pas absolue. À 1% de luminosité, il n’y a presque aucune place pour le chroma, donc un minuscule écart entre canaux est aussi coloré que cette luminosité le permet — et se traduit par 100%. L’algorithme se comporte correctement ; il mesure simplement autre chose que ce que la plupart des gens attendent.
La luminosité HSL est-elle la même chose que la luminance ?
Non, et c’est le piège. Le HSL pondère les trois canaux à égalité, alors que l’œil pondère bien plus le vert que le bleu. hsl(60 100% 50%) et hsl(240 100% 50%) revendiquent la même luminosité ; l’une est un jaune éblouissant et l’autre est presque noire. Pour tout ce qui dépend de la luminance perçue — une échelle de teintes, une décision de contraste, un mélange — OKLCH donne la bonne réponse là où le HSL en donne une plausible mais fausse.
Faut-il utiliser HSL en CSS ?
Il convient très bien pour ce qu’il sait faire : retoucher une teinte, désaturer quelque chose, ou écrire une couleur que vous voulez pouvoir lire d’un coup d’œil. C’est le mauvais outil pour générer une échelle ou interpoler entre deux couleurs, parce que son axe de luminosité n’est pas perceptuel. Ces travaux réclament oklch(), que tous les navigateurs actuels prennent en charge.
La conversion de hex en HSL perd-elle en précision ?
La conversion elle-même est exacte — c’est un changement de coordonnées sur les mêmes trois octets. Ce qui perd en précision, c’est l’affichage : une teinte arrondie au degré et une saturation au dixième de pour cent ne se reconvertissent pas toujours en un hex identique. Les valeurs ici sont affichées avec assez de précision pour faire l’aller-retour, et si vous avez besoin d’un aller-retour garanti exact, gardez le hex.
Comment éclaircir ou assombrir une couleur sans décaler sa teinte ?
Convertissez-la en HSL et ne bougez que la luminosité. Garder la teinte et la saturation fixes tout en progressant sur la luminosité — 50%, 60%, 70% — est ce qui produit une échelle de teintes qui se lit encore comme une seule couleur. Ajuster un hex à la main ne sait pas faire cela : ajouter la même quantité aux trois canaux change la teinte autant que la luminosité.
Quels outils liés devriez-vous utiliser ensuite ?
- Convertir des couleursHEX, RGB, HSL, HSV, OKLCH et CMYK dans les deux sens à la fois
- Convertir HEX en RGBTransforme une couleur hex en rgb(), canal alpha compris
- Convertir RGB en HEXTransforme des valeurs rgb() en hex à 3, 6 ou 8 chiffres
- Convertir HSL en HEXTransforme teinte, saturation et luminosité en couleur hex