Convertir HEX en HSL Hexadecimal ↔ Hue Saturation Lightness Gratuit En ligne Sûr
Saisissez une valeur en HEX et lisez-la aussitôt en HSL. Le calcul se fait dans votre navigateur, rien n'est envoyé nulle part, et ce dont dépend le résultat est écrit plus bas plutôt que supposé.
Rien n'est envoyé
D'où viennent ces notations
L'hexadécimal et le RGB sont la même chose écrite deux fois. Une couleur d'écran, ce sont trois nombres — combien de lumière rouge, verte et bleue émettre —, chacun de 0 à 255, soit un octet ; l'hexadécimal écrit simplement ces octets en base seize, si bien que #FF8800 et rgb(255, 136, 0) sont le même ordre donné au même pixel. Le HSL fut inventé parce qu'aucun des deux n'est lisible par un humain : il donne la teinte comme un angle sur une roue chromatique, la saturation et la clarté en pourcentages, de sorte qu'un graphiste peut éclaircir quelque chose sans recalculer trois chiffres. Le CMJN appartient à un tout autre monde — l'encre, non la lumière. Il est soustractif, bâti sur quatre plaques d'impression, et il n'atteint pas toutes les couleurs d'un écran, car l'écran émet de la lumière tandis que le papier ne fait que la renvoyer.
Où vous les rencontrez
L'hexadécimal est ce que l'on tape dans une feuille de style et ce qu'un outil de création vous tend. Le RGB paraît partout où une couleur demande du calcul : dégradés, transparence, code qui calcule une nuance. On se tourne vers le HSL pour ajuster une palette à la main, car les changements voulus sont d'ordinaire des changements de l'un de ses trois nombres. Le CMJN est ce que réclame l'imprimeur, et la conversion vers lui est l'instant où une maquette cesse d'être lumière pour devenir encre.
Questions fréquentes
Pourquoi mon résultat CMJN diffère-t-il de celui de mon imprimeur ?
Parce qu'il n'existe pas une seule conversion correcte. Le calcul de cette page est le calcul simple, indépendant du périphérique : la bonne réponse quand on cherche un point de départ ou un équivalent approché. Un imprimeur convertit via un profil colorimétrique tenant compte de l'encre, du papier et de la presse ; la même couleur RGB donnera d'autres valeurs CMJN sur couché brillant que sur non couché. Pour ce qui doit correspondre exactement, demandez son profil à l'imprimeur plutôt que de vous fier à une formule.
Pourquoi certaines couleurs d'écran ne s'impriment-elles pas ?
Parce que les deux n'atteignent pas les mêmes couleurs. Un écran fait la couleur en ajoutant de la lumière et peut produire un cyan ou un vert vif et saturé que l'encre ne sait pas égaler ; le papier fait la couleur en absorbant la lumière, et le plus clair qu'il puisse être est le blanc de la page. L'ensemble des couleurs accessibles s'appelle le gamut, et là où les deux ne se recouvrent pas, une conversion doit choisir la couleur disponible la plus proche. C'est pourquoi une couleur éclatante à l'écran paraît souvent un peu terne à l'impression.
Le résultat est-il exact ?
Là où les deux unités se définissent l'une par l'autre en nombres entiers, oui — la page le dit au-dessus du chiffre, et le seul arrondi porte sur le nombre de décimales affichées. Là où le rapport n'a pas de décimale finie, la page affiche douze chiffres significatifs et qualifie la relation d'approchée plutôt que de prétendre le contraire.
Ce que je saisis quitte-t-il mon appareil ?
Non. Le calcul se fait dans votre navigateur ; rien n'est envoyé, et il n'y a d'ailleurs aucun serveur pour le recevoir. Une fois la page chargée, elle fonctionne réseau coupé.
Pourquoi on convertit du HEX en HSL
Un code hexadécimal comme #5A4632 est une bonne manière de stocker une couleur et une mauvaise manière d'y réfléchir. Rien dans les chiffres ne vous dit que la couleur est un brun, quelle est sa luminosité ou à quoi ressemblerait une version un peu plus pâle. Le HSL a été inventé pour y remédier. Il décrit une couleur comme les gens ont l'habitude d'en parler : quelle teinte elle a, à quel point elle est vive et à quel point elle est claire. Convertir du HEX en HSL, c'est traduire une couleur de la forme que vous remet un outil de conception vers la forme avec laquelle vous pouvez raisonner : hsl(30, 29%, 28%) est un brun orangé sombre et sourd, et vous voyez aussitôt qu'augmenter le dernier nombre le rendra plus pâle.
C'est la vraie raison pour laquelle graphistes et développeurs front-end utilisent la conversion. Ils ont une couleur de marque en hexadécimal et ont besoin d'une famille de couleurs apparentées : une plus claire pour l'état de survol, une plus sombre pour un bouton enfoncé, une très pâle pour une teinte de fond, une désaturée pour un contrôle désactivé. En hexadécimal, chacune est une nouvelle chasse à trois paires de chiffres. En HSL, chacune est un changement d'un seul nombre. La couleur est la même couleur, vue à travers une lentille plus utile.
Cette page convertit dans votre navigateur et rien n'est envoyé. Vous trouverez plus bas comment les trois nombres du HSL sont calculés à partir des chiffres hexadécimaux, ce que la conversion conserve et où elle arrondit, ce que signifient en pratique la teinte, la saturation et la luminosité, comment les graphistes utilisent le HSL pour construire des palettes et des états, et les pièges qui attrapent ceux qui convertissent du HEX en HSL pour la première fois.
Ce que décrit le HSL
Teinte : la position sur le cercle chromatique
La teinte est un angle de 0 à 360 degrés autour d'un cercle chromatique. Le rouge se trouve à 0, le jaune à 60, le vert à 120, le cyan à 180, le bleu à 240 et le magenta à 300 ; à 360, vous êtes revenu au rouge. Une teinte de 30 se situe entre le rouge et le jaune, c'est-à-dire l'orange. Le nombre dit dans quelle famille de couleurs vous êtes, et rien de la vivacité ou de la pâleur.
Saturation : à quel point c'est vif
La saturation est un pourcentage. À 100%, la couleur est aussi pure que la teinte le permet ; à 0%, elle a perdu toute sa couleur et est un gris. Une saturation de 29%, comme pour notre brun d'exemple, est une couleur sourde et terreuse. Baisser la saturation est le moyen le plus rapide de calmer une couleur criarde sans changer son caractère.
Luminosité : à quel point c'est pâle ou sombre
La luminosité est aussi un pourcentage. À 0%, la couleur est noire quelles que soient la teinte et la saturation ; à 100%, elle est blanche ; à 50%, elle est la couleur pleine, normale. Notre brun à 28% est du côté sombre. Augmenter le nombre donne une version plus pâle de la même couleur, et le baisser une version plus sombre, exactement le changement que les graphistes veulent le plus souvent.
Pourquoi c'est plus facile qu'en hexadécimal
En hexadécimal, rendre une couleur plus pâle signifie augmenter les trois paires de montants différents pour que la teinte ne dérive pas, ce qui est quasi impossible à l'œil. En HSL, cela signifie changer un seul chiffre et laisser les deux autres tranquilles.
Comment fonctionne la conversion
De trois octets à un angle et deux pourcentages
Le convertisseur lit d'abord les chiffres hexadécimaux comme les valeurs de rouge, de vert et de bleu, chacune de 0 à 255, et les ramène à une échelle entre 0 et 1. Il trouve la plus grande et la plus petite des trois. La luminosité est la moyenne des deux. La saturation dépend de leur écart, rapporté à la luminosité. La teinte dépend du canal le plus grand et de la comparaison des deux autres. Si les trois sont égaux, la couleur est un gris, la saturation est nulle et la teinte n'a aucun sens ; le convertisseur affiche alors 0.
L'exemple
Pour #5A4632, les octets sont 90, 70 et 50. Le rouge est le plus grand à 0,353, le bleu le plus petit à 0,196. La luminosité est la moitié de leur somme, 0,275, environ 28%. L'écart est de 0,157 ; la saturation est donc 0,157 divisé par la somme 0,549, environ 29%. Le rouge est le canal le plus grand et le vert se situe entre, ce qui place la teinte à 30 degrés. Le résultat est hsl(30, 29%, 28%).
Nombres entiers
Les trois nombres sont arrondis au degré entier et au pourcentage entier quand ils sont écrits. C'est la forme qu'emploient les gens et celle qu'attend CSS dans le travail courant, mais cela signifie qu'une information est perdue au dernier chiffre, comme l'explique la section suivante.
Ce que la conversion conserve et ce qu'elle ne peut pas
Elle conserve la couleur telle que l'œil la classe
Le résultat est la couleur telle que l'œil la classe : une teinte sur le cercle, son degré de saturation, sa clarté. C'est pourquoi le HSL mérite d'exister. Vous pouvez rendre une couleur plus pâle ou une nuance plus sombre en changeant un nombre, ce qui est quasi impossible en hexadécimal.
Elle ne peut pas promettre de retrouver les mêmes octets
Les deux décrivent les mêmes couleurs, mais le HSL les atteint par une autre géométrie, et ses trois nombres sont arrondis au degré entier et au pourcentage entier quand ils sont écrits. Une couleur passée en HSL et revenue peut donc tomber à un ou deux crans de son point de départ : identique à l'œil, non octet pour octet. Si vous avez besoin des octets exacts, gardez l'hexadécimal. Convertissez le HEX en HSL pour travailler avec une couleur, et gardez l'hexadécimal comme référence.
Les gris n'ont pas de teinte
Quand les trois octets sont égaux, il n'y a rien à dire de la teinte. Le convertisseur donne une teinte de 0 et une saturation de 0%, et la luminosité seule décrit le gris. N'allez pas lire quoi que ce soit dans ce 0.
Utiliser le HSL en pratique
Construire une famille de nuances
Prenez la couleur de base hsl(30, 29%, 28%). Une nuance plus claire pour le survol est hsl(30, 29%, 34%). Une teinte très pâle pour un fond est hsl(30, 29%, 94%). Une nuance plus sombre pour les états enfoncés est hsl(30, 29%, 22%). La teinte et la saturation ne bougent pas ; les couleurs vont donc manifestement ensemble. Faire de même en hexadécimal demanderait plusieurs essais et paraîtrait encore légèrement faux.
Thèmes et mode sombre
Un thème a souvent besoin de la même palette en version claire et en version sombre. Avec le HSL, vous gardez la teinte et ajustez la luminosité et la saturation : éclaircir les fonds et assombrir le texte pour le thème clair, et l'inverse pour le sombre. Définir la teinte comme propriété personnalisée et ne faire varier que la luminosité est une façon courante et soignée de procéder.
Générer des palettes
Pour trouver des couleurs qui vont avec une base, faites tourner la teinte. Trente degrés de chaque côté donnent des couleurs analogues, 180 donne la complémentaire, et 120 ou 240 donnent une triade. Fixez la saturation et la luminosité, changez la teinte, et les couleurs ont un aspect uniforme. C'est un moyen rapide de commencer une palette qui ne paraît pas aléatoire.
Contraste accessible
La luminosité est le principal levier du contraste. Si le texte est difficile à lire sur un fond coloré, la solution consiste généralement à augmenter l'écart de luminosité entre eux, et le HSL en fait l'ajustement d'un nombre de chaque côté.
Comment convertir du HEX en HSL ici
Saisissez ou collez le code hexadécimal
Entrez la couleur dans le premier champ, avec ou sans dièse. Les formes à trois et à six chiffres sont acceptées, et la forme à huit chiffres avec transparence est lue aussi.
Lisez la valeur HSL
La réponse apparaît aussitôt, comme dans #5A4632 = hsl(30, 29%, 28%). Les trois nombres sont la teinte en degrés, la saturation et la luminosité en pourcentage.
Copiez-la dans votre feuille de style
Utilisez le résultat tel quel, dans une règle comme color: hsl(30, 29%, 28%). Pour ajuster la couleur, changez le dernier chiffre. L'outil pour le sens inverse est Convertir HSL en HEX.
D'où viennent ces notations
L'hexadécimal et le RGB sont la même chose écrite deux fois
Une couleur d'écran, ce sont trois nombres, la quantité de lumière rouge, verte et bleue à émettre, chacun de 0 à 255, soit un octet. L'hexadécimal écrit simplement ces octets en base seize. Pour voir les nombres, convertissez le HEX en RGB.
HSL et CMYK
Le HSL a été inventé parce qu'aucune des deux n'est lisible pour un humain : il donne la teinte comme un angle autour d'un cercle chromatique, avec la saturation et la luminosité en pourcentages, si bien qu'un graphiste peut éclaircir quelque chose sans recalculer trois chiffres. Le CMYK appartient à un tout autre monde, celui de l'encre plutôt que de la lumière. Il est soustractif, construit à partir de quatre plaques d'impression, et ne peut pas atteindre toutes les couleurs qu'un écran peut montrer, parce qu'un écran émet de la lumière alors que le papier ne fait que la réfléchir.
Pièges quand on convertit du HEX en HSL
S'attendre à un aller-retour parfait
À cause de l'arrondi, reconvertir peut donner un code à un ou deux crans de l'original. Pour une couleur isolée, c'est invisible. Pour un système de conception où de nombreuses couleurs sont converties dans les deux sens, cela peut s'accumuler. Gardez l'hexadécimal comme source.
Supposer qu'une même luminosité signifie une même clarté perçue
Deux couleurs ayant la même luminosité HSL peuvent paraître très différentes en clarté : un jaune à 50% paraît bien plus clair qu'un bleu à 50%. La luminosité HSL est un nombre commode, non une mesure de la clarté perçue. Pour les vérifications de contraste, utilisez un véritable outil de contraste.
Oublier les signes pour cent
En CSS, la saturation et la luminosité dans hsl() portent des signes pour cent, et la teinte est un nombre simple ou un nombre suivi de deg. Omettre les signes est une erreur classique.
Lire trop de choses dans un gris
Un gris n'a pas de teinte. Si le convertisseur affiche 0 pour lui, cela ne veut pas dire qu'il tire sur le rouge.
Questions que l'on se pose avant de convertir
Que vaut #FF0000 en HSL ?
hsl(0, 100%, 50%), le rouge pur.
Que vaut #FFFFFF en HSL ?
hsl(0, 0%, 100%), le blanc. La teinte n'a pas de sens pour le blanc, et le convertisseur affiche 0.
Le HSL est-il pris en charge partout ?
Tous les navigateurs actuels comprennent hsl() et hsla(). Il est en CSS depuis de nombreuses années.
La conversion est-elle exacte ?
Elle est exacte en ce sens qu'elle décrit la même couleur, mais les nombres sont arrondis au degré et au pourcentage entiers ; revenir en arrière peut donc tomber un cran à côté.
Ma couleur est-elle envoyée ?
Non. L'arithmétique s'exécute dans votre navigateur et rien n'est envoyé nulle part.
Comment revenir en arrière ?
Avec Convertir HSL en HEX.
Bien choisir quand vous convertissez du HEX en HSL
Le HSL pour travailler, l'hexadécimal pour stocker
Gardez la palette de référence en hexadécimal, où elle est sans ambiguïté, et utilisez le HSL quand vous voulez créer des variations. Les allers-retours perdent un peu ; la référence, non.
Envisager de nouveaux espaces colorimétriques
CSS propose maintenant oklch() et des notations similaires où une luminosité égale paraît réellement égale. Elles valent la peine d'être apprises pour de nouveaux systèmes de conception. Le HSL reste la notation que presque tout le monde comprend et que tous les outils prennent en charge.
Utiliser des propriétés personnalisées
Définissez --hue, --sat et --light, et construisez des couleurs à partir d'elles : hsl(var(--hue) var(--sat) var(--light)). Un thème change alors en modifiant quelques nombres.
Lire et écrire du HSL en toute confiance
Quelques repères à retenir
Quelques nombres rendent le HSL plus facile à lire. Les teintes aux multiples de 60 sont les couleurs pures : 0 rouge, 60 jaune, 120 vert, 180 cyan, 240 bleu, 300 magenta. Une luminosité de 50 avec une saturation de 100 donne la version la plus pure de toute teinte, et une luminosité de 95 ou plus est une teinte si pâle qu'elle sert de fond. Quand vous convertissez du HEX en HSL et voyez une teinte proche de l'un de ces repères, vous pouvez nommer la famille de couleurs d'un coup d'œil.
Passer d'une famille à l'autre
Ajouter 180 à une teinte donne la couleur opposée sur le cercle, la complémentaire, généralement le contraste le plus fort. Ajouter ou retrancher 30 donne une voisine qui se place confortablement à côté de l'originale. Les graphistes utilisent ces pas pour choisir des accents qui vont avec une couleur de marque sans deviner.
Garder une trace des valeurs converties
Quand vous convertissez du HEX en HSL pour une palette, écrivez les résultats dans un tableau, avec l'hexadécimal d'origine à côté. Le tableau montre comment les couleurs se rapportent les unes aux autres, et si une teinte ou une luminosité détonne par rapport aux autres, l'anomalie se voit aussitôt. Il donne aussi à votre équipe une référence commune.
Tester sur de vrais écrans
Des couleurs qui paraissent équilibrées sur un moniteur calibré peuvent paraître différentes sur un téléphone au soleil ou un portable bon marché. Vérifiez la palette terminée sur au moins deux appareils et ajustez un peu la luminosité si les teintes pâles disparaissent sur l'un d'eux.
Convertisseurs associés
La même famille d'outils couvre les conversions voisines. Pour revenir en arrière, utilisez Convertir HSL en HEX. Pour les nombres derrière le code, il y a Convertir HEX en RGB et Convertir RGB en HEX, et pour l'impression, Convertir HEX en CMYK et Convertir CMYK en HEX. Pour les tailles de la même feuille de style, Convertir px en rem et Convertir px en em font pour les longueurs ce que cette page fait pour les couleurs.
Un exemple détaillé
Supposons que votre couleur de marque soit #1E7A5C. Vous convertissez le HEX en HSL et lisez hsl(160, 61%, 30%). Pour un état de survol, vous écrivez hsl(160, 61%, 36%), un peu plus clair. Pour un état enfoncé, hsl(160, 61%, 24%). Pour un fond très pâle derrière un avis, hsl(160, 40%, 95%). Pour un bouton désactivé, hsl(160, 12%, 60%), la même teinte avec l'essentiel de la couleur retiré. Cinq couleurs, une teinte, écrites en une minute, et toutes paraissent aller ensemble. Quand la couleur de la marque change, vous changez une fois le nombre de la teinte.
Une courte liste de contrôle
Avant de convertir
Décidez ce que vous voulez faire de la couleur : la décliner, la mettre dans un thème ou simplement la lire.
Pendant la conversion
Collez l'hexadécimal, lisez la valeur HSL et notez les trois nombres.
Après la conversion
Créez les variations en changeant un nombre à la fois, et regardez-les sur le vrai fond.
Erreurs courantes
Prendre les nombres arrondis pour exacts
Ce sont des nombres entiers. Gardez l'hexadécimal comme référence.
Assimiler luminosité et clarté perçue
Deux couleurs à la même luminosité peuvent différer fortement par leur clarté apparente.
Omettre les signes pour cent
La saturation et la luminosité en ont besoin en CSS.
Vos couleurs restent sur votre appareil
Le calcul se fait en local. Vos valeurs sont utilisées par votre propre navigateur et rien n'est envoyé nulle part. Il n'y a rien à supprimer ensuite et aucun compte à créer. C'est la manière simple de convertir du HEX en HSL.
Résumé
Pour convertir du HEX en HSL ici, saisissez ou collez le code hexadécimal et lisez aussitôt la valeur HSL. La conversion conserve la couleur telle que l'œil la classe : une teinte sur le cercle, son degré de saturation, sa clarté. C'est pourquoi le HSL mérite d'exister, puisque vous pouvez rendre une couleur plus pâle ou une nuance plus sombre en changeant un nombre, ce qui est quasi impossible en hexadécimal. Les deux décrivent les mêmes couleurs, mais le HSL les atteint par une autre géométrie, et ses trois nombres sont arrondis au degré et au pourcentage entiers ; une couleur passée en HSL et revenue peut donc tomber à un ou deux crans de son point de départ. Si vous avez besoin des octets exacts, gardez l'hexadécimal. Rien n'est envoyé.