Convertir HSL en HEX Hue Saturation Lightness ↔ Hexadecimal Gratuit En ligne Sûr
Saisissez une valeur en HSL et lisez-la aussitôt en HEX. 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 HSL en HEX
Vous avez élaboré une couleur en HSL, parce que c'est la notation dans laquelle on peut penser : teinte 30, saturation 29%, luminosité 28%, un brun sourd, et une version plus pâle à 34% pour l'état de survol. Maintenant la couleur doit aller quelque part où l'on veut un code hexadécimal : un fichier de jetons de conception, une charte de marque, un outil qui ne comprend pas hsl(), un modèle d'e-mail, un message à un collègue. Convertir du HSL en HEX, c'est écrire la couleur à laquelle vous avez réfléchi sous la forme courte, sans ambiguïté et comprise par tout.
La conversion va dans le sens opposé à celui que rencontrent d'abord les graphistes. Elle part de trois nombres conviviaux pour un humain et arrive à trois octets. Chaque étape est de l'arithmétique simple, mais elle comporte quelques cas de type trigonométrique et des arrondis, ce qui explique que l'on préfère la faire faire. La page le fait dans votre navigateur, et rien n'est envoyé. Vous trouverez plus bas comment les trois nombres deviennent les six chiffres hexadécimaux, ce que la conversion conserve, pourquoi une couleur passée par le HSL peut tomber à un ou deux crans de son point de départ, les manières dont les graphistes utilisent la conversion et les pièges à éviter.
Comment fonctionne la conversion
De la teinte, la saturation et la luminosité au rouge, au vert et au bleu
Le convertisseur calcule d'abord la chroma, c'est-à-dire l'éloignement de la couleur par rapport au gris : elle croît avec la saturation et diminue quand la luminosité s'éloigne de 50%. Il place ensuite la teinte dans l'un des six secteurs du cercle chromatique, larges chacun de 60 degrés, et décide d'après le secteur lequel des trois canaux est à son maximum, lequel à son minimum et lequel se situe entre les deux. Enfin, il ajoute une constante pour que la luminosité tombe juste, ramène les trois valeurs de la plage 0 à 1 à la plage 0 à 255 et arrondit chacune à un nombre entier. Ces trois octets sont écrits en base seize, deux chiffres chacun.
Un exemple chiffré
Prenez hsl(30, 29%, 28%). La chroma est (1 − |2 × 0,28 − 1|) × 0,29 = 0,56 × 0,29 = 0,1624. La teinte de 30 degrés se trouve à mi-chemin du premier secteur ; le canal du milieu vaut donc la moitié de la chroma, 0,0812. La constante à ajouter est 0,28 − 0,0812 = 0,1988. Le rouge est donc 0,1624 + 0,1988 = 0,3612, le vert est 0,0812 + 0,1988 = 0,28 et le bleu est 0,1988. Multipliés par 255 et arrondis, cela donne 92, 71 et 51. En hexadécimal, c'est #5C4733.
Les gris
Quand la saturation est de 0%, la couleur est un gris quelle que soit la teinte, et les trois octets sont égaux. hsl(0, 0%, 50%) est #808080. La teinte est ignorée ; n'importe quel nombre de teinte donne donc le même gris.
Ce que la conversion conserve et ce qu'elle ne peut pas
Elle conserve la couleur telle que vous l'avez décrite
Le résultat est la couleur dont vous avez donné la teinte, la saturation et la luminosité, écrite en octets. Les trois nombres que vous avez saisis sont 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, et la conversion porte fidèlement votre choix vers l'hexadécimal.
Elle ne peut pas promettre les mêmes nombres au retour
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. Dans notre exemple, #5A4632 était une couleur dont le HSL est environ hsl(30, 29%, 28%) ; reconvertir ces chiffres arrondis donne #5C4733, à deux crans en rouge. Si vous avez besoin des octets exacts, gardez l'hexadécimal.
Signes pour cent et de degré
La page lit la teinte en degrés, la saturation et la luminosité en pourcentage. Vous pouvez les écrire avec ou sans les signes. Une teinte supérieure à 360 ou inférieure à 0 est ramenée autour du cercle ; 390 est donc la même chose que 30.
Usages pratiques
Écrire un fichier de jetons de conception
Un système de conception stocke les couleurs sous forme de jetons. Beaucoup d'équipes créent les couleurs en HSL, parce qu'elles peuvent raisonner dessus, et les publient en hexadécimal, parce que tous les outils le lisent. Convertissez le HSL en HEX une fois pour chaque jeton, et le fichier publié est quelque chose que tout le monde peut utiliser.
Produire des couleurs pour des outils qui ne lisent pas hsl()
Les clients de messagerie, certains éditeurs de documents, les programmes graphiques plus anciens et de nombreuses bibliothèques de graphiques n'acceptent que l'hexadécimal. Ce que vous avez élaboré en HSL doit être converti avant qu'ils puissent l'utiliser.
Vérifier une palette générée
Un script qui génère une palette en faisant tourner la teinte donne une liste de valeurs hsl(). Pour les voir comme les codes que vous mettriez dans une feuille de style ou remettriez à un graphiste, convertissez chacune en hexadécimal. Cela permet aussi de repérer les valeurs qui s'arrondissent au même code et ne diffèrent donc pas vraiment.
Partager une couleur dans un message
Un code hexadécimal est court, copiable et compris de presque tous ceux qui travaillent avec la couleur. Une valeur hsl() est plus longue et moins familière hors du graphisme. Quand vous envoyez une couleur à quelqu'un, l'hexadécimal est la forme courtoise.
Comment convertir du HSL en HEX ici
Saisissez ou collez la valeur HSL
Entrez la couleur dans le premier champ sous la forme hsl(30, 29%, 28%), ou simplement les trois nombres. La teinte est en degrés, la saturation et la luminosité en pourcentage.
Lisez le code hexadécimal
La réponse apparaît aussitôt, comme dans hsl(30, 29%, 28%) = #5C4733. Elle est écrite en majuscules avec un dièse.
Copiez-le dans votre travail
Utilisez le code dans votre feuille de style, votre fichier de jetons ou votre message. Pour le sens inverse, Convertir HEX en HSL est à un clic.
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 HSL en HEX
S'attendre à retrouver le code d'origine
Si vous êtes parti d'un code hexadécimal, l'avez converti en HSL, n'avez rien ajusté et avez reconverti, vous pouvez obtenir un code différent, à un ou deux crans. Pour une couleur isolée, c'est invisible. Pour un système de conception, décidez quelle forme est la référence et traitez l'autre comme dérivée.
Confondre saturation et luminosité
Les deux s'intervertissent facilement par erreur : hsl(30, 28%, 29%) n'est pas hsl(30, 29%, 28%). L'ordre est teinte, saturation, luminosité. Si la couleur à l'écran n'a pas l'aspect attendu, vérifiez que vous ne les avez pas inversées.
Oublier que la luminosité n'est pas la clarté perçue
Deux couleurs de même luminosité peuvent paraître différentes en clarté. Le jaune à 50% de luminosité paraît bien plus clair que le bleu à 50%. Si vous choisissez des couleurs pour le texte et le fond, vérifiez leur contraste avec un véritable outil, non en comparant des nombres de luminosité.
Utiliser des valeurs hors plage
La saturation et la luminosité sont limitées à 0 à 100 pour cent. Les valeurs hors de cette plage sont ramenées à ses bornes. Une luminosité de 120% n'est pas plus claire que le blanc ; c'est le blanc.
Questions que l'on se pose avant de convertir
Que vaut hsl(0, 100%, 50%) en hexadécimal ?
#FF0000, le rouge pur.
Que vaut hsl(0, 0%, 100%) en hexadécimal ?
#FFFFFF, le blanc.
Puis-je utiliser des décimales ?
Oui. hsl(30.5, 28.6%, 27.8%) est accepté. Le résultat est arrondi à des octets entiers.
La conversion est-elle exacte ?
Elle donne les octets exacts pour les nombres que vous avez saisis, arrondis à des valeurs entières. Revenir en arrière peut tomber un cran à côté, parce que les nombres HSL ont été arrondis.
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 HEX en HSL.
Bien choisir quand vous convertissez du HSL en HEX
Décider quelle forme est la référence
Si vous concevez en HSL, gardez les valeurs HSL comme source et publiez l'hexadécimal en sortie. Si la marque vous donne de l'hexadécimal, gardez-le et n'utilisez le HSL que pour les variations. Mêler les deux comme sources égales est ce qui crée la dérive.
Le HSL pour varier, l'hexadécimal pour fixer
Quand vous avez besoin d'une famille de nuances, travaillez en HSL. Quand vous devez fixer une couleur pour qu'elle soit identique dans tous les outils, écrivez-la en hexadécimal.
Garder les nombres que vous avez saisis
Consignez les valeurs HSL à côté de l'hexadécimal dans la note de votre palette. Si quelqu'un veut plus tard une version plus pâle, il pourra partir de vos nombres et non d'un code déjà arrondi.
Les six secteurs du cercle
Quel canal est haut, lequel est bas
La conversion divise le cercle en six secteurs de 60 degrés, et dans chacun un canal est à son maximum, un à son minimum, et le troisième change progressivement. De 0 à 60, le rouge est au maximum, le bleu au minimum et le vert monte : le rouge tourne au jaune. De 60 à 120, le vert est au maximum et le rouge baisse : le jaune tourne au vert. De 120 à 180, le vert reste haut et le bleu monte : le vert tourne au cyan. De 180 à 240, le bleu prend le relais et le vert baisse. De 240 à 300, le bleu reste haut et le rouge monte : le bleu tourne au magenta. De 300 à 360, le rouge reprend le dessus et le bleu baisse. Quand vous convertissez du HSL en HEX, il est utile de savoir dans quel secteur se trouve votre teinte, car cela vous dit laquelle des trois paires de la réponse sera la plus grande.
Pourquoi la réponse a un air de famille
Des couleurs de même teinte et de même saturation mais de luminosité différente donnent des codes hexadécimaux qui ressemblent à des parents : le même schéma de paire haute et de paire basse, simplement ramené à plus ou moins. #5C4733, #7A5F44 et #A38461 sont tous de la même famille, avec le rouge le plus grand, puis le vert, puis le bleu. Vous pouvez apprendre à lire cela d'un coup d'œil, et cela rend les erreurs plus faciles à repérer.
Construire une échelle de luminosité
Une teinte, neuf paliers
Un usage très pratique de la conversion est de construire une échelle d'une seule couleur, du très pâle au très sombre, du genre d'échelle que les systèmes de conception étiquettent 50, 100, 200 et ainsi de suite jusqu'à 900. Choisissez une teinte et une saturation, et faites passer la luminosité par des valeurs comme 96, 90, 80, 70, 60, 50, 40, 30 et 20 pour cent. Convertissez le HSL en HEX pour chaque palier, et vous avez neuf codes qui vont ensemble. Réduire légèrement la saturation aux extrémités, de quelques points aux paliers les plus pâles et les plus sombres, paraît souvent plus naturel que de la garder constante.
Nommer les paliers
Donnez à chaque palier un nom qui consigne son rôle et non sa valeur : surface pour le plus pâle, bordure pour le suivant, texte pour le plus sombre. Dans le code, un nom dit au lecteur suivant à quoi sert la couleur, et vous pouvez changer le nombre qui se cache derrière sans toucher aux règles qui l'utilisent.
Thèmes clair et sombre
Inverser l'échelle
Un thème sombre est souvent le thème clair avec l'échelle retournée : le palier le plus pâle, qui est le fond de page du thème clair, devient le plus sombre dans le thème sombre. Si vous avez construit l'échelle en HSL, le thème sombre ne vous coûte qu'un second jeu de conversions. Gardez la teinte fixe, ce qui préserve le caractère de la marque, et ajustez légèrement la saturation, car les couleurs saturées paraissent dures sur fonds sombres.
Vérifier les deux thèmes
Testez le contraste de chaque couple texte et fond des deux thèmes. Une couleur qui fonctionne sur le blanc peut échouer sur un quasi-noir, et la vérification prend une minute avec un outil de contraste et les codes hexadécimaux que vous venez de produire.
Quand vous n'avez qu'une vague idée de la couleur
Partir du cercle, puis affiner
Parfois, vous n'avez aucun code hexadécimal, seulement une idée : un bleu calme, un orange chaud, un vert frais. Le HSL est un bon point de départ, car vous pouvez choisir une teinte parmi les repères du cercle, régler une saturation modérée et une luminosité moyenne, puis convertir le HSL en HEX pour voir ce que vous avez. Si cela paraît trop criard, baissez la saturation ; si cela paraît plat, déplacez la luminosité. Chaque essai coûte des secondes, et vous finissez avec un code hexadécimal que vous pouvez mettre tout droit dans une feuille de style.
Convertisseurs associés
La même famille d'outils couvre les conversions voisines. Pour revenir en arrière, utilisez Convertir HEX en HSL. 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 fait pour les longueurs ce que cette page fait pour les couleurs.
Un exemple détaillé
Supposons que vous ayez choisi un vert pour l'état de réussite d'une application : hsl(145, 55%, 38%). Vous le saisissez et lisez #2C9658. Vous utilisez ce code dans le fichier de jetons comme --success. Pour le fond d'un avis de réussite, vous prenez la même teinte, hsl(145, 45%, 94%), et lisez #E9F7EF. Pour la bordure, hsl(145, 45%, 78%), qui se lit #AEE0C3. Trois codes, une teinte, tous dérivés en une minute, et chacun un simple code hexadécimal que n'importe quel outil de l'équipe peut ouvrir.
Une courte liste de contrôle
Avant de convertir
Vérifiez l'ordre des trois nombres : teinte, saturation, luminosité. Décidez quelle forme est votre référence.
Pendant la conversion
Saisissez les valeurs, lisez l'hexadécimal et copiez-le avec son dièse.
Après la conversion
Regardez la couleur à l'écran en contexte, et notez les valeurs HSL à côté du code pour plus tard.
Erreurs courantes
Intervertir saturation et luminosité
L'ordre est teinte, saturation, luminosité.
S'attendre à retrouver l'ancien hexadécimal
Il peut tomber un cran à côté. Gardez l'original si cela compte.
Comparer la luminosité au lieu du contraste
Utilisez un outil de contraste pour le texte et le fond.
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 HSL en HEX.
Résumé
Pour convertir du HSL en HEX ici, saisissez la teinte en degrés, la saturation et la luminosité en pourcentage, et lisez aussitôt le code hexadécimal. La conversion conserve la couleur telle que l'œil la classe : une teinte sur le cercle, son degré de saturation, sa clarté. Les deux notations 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é.