Convertir HSL en code HEX
Saisissez des valeurs HSL et le code HEX s’affiche pendant la frappe : hsl(217.2, 91.2%, 59.8%) donne #3B82F6. Le champ accepte les virgules, les espaces et l’opacité après une barre oblique. Avec la notation Office, vous saisissez les trois nombres 0–255 lus dans la boîte Couleurs.
Saisissez la teinte en degrés, puis la saturation et la luminosité en pourcentage. Séparez les valeurs par des virgules ou des espaces.
Comment convertir HSL en HEX ?
Transformez la saturation et la luminosité en fractions de 0 à 1, calculez les trois canaux RVB et écrivez chaque canal en deux chiffres hexadécimaux. Le calcul repose sur la chroma, l’écart entre le canal le plus fort et le plus faible[1]. Si les nombres viennent d’Office, choisissez d’abord la notation Microsoft Office (0–255). Si le champ contient déjà une couleur, le sélecteur la réécrit comme la même couleur dans la nouvelle notation.
Formule : C = (1 − |2L − 1|) × S, le canal le plus fort vaut L + C ÷ 2 et le plus faible L − C ÷ 2.
Prenons hsl(217.2, 91.2%, 59.8%). La chroma vaut 0,733. Le canal le plus fort a 0,965 et le plus faible 0,231. Une teinte de 217,2° se situe entre le cyan et le bleu, donc le bleu est le canal le plus fort, le rouge le plus faible et le vert est à 0,510[1].
Multipliés par 255, les canaux donnent 59, 130 et 246. En hexadécimal, cela fait 3B, 82 et F6, soit #3B82F6. Chaque moitié du calcul a son outil: le convertisseur de couleurs pour passer de HSL en RVB et le convertisseur RVB en HEX.
Que signifient teinte, saturation et luminosité en HSL ?
La première valeur est la teinte, donnée sous forme d’angle sur le cercle chromatique. Les couleurs primaires de l’écran y sont espacées de 120 degrés : le rouge à 0°, le vert à 120° et le bleu à 240°, et 360° correspond de nouveau au rouge[2].
La deuxième valeur est la saturation. À 100 %, la couleur est pleinement saturée, et à 0 % elle devient un gris sur lequel la teinte n’agit plus. La troisième valeur est la luminosité. Elle donne le noir à 0 %, le blanc à 100 % et la couleur pleine d’une teinte à 50 %[2].
CSS accepte aussi la teinte dans d’autres unités d’angle. Un tour complet vaut 360 degrés, 400 grades, 2π radians ou un tour écrit 1turn[3]. Le convertisseur les lit toutes, donc 0.25turn donne la même couleur que 90°.
Le modèle HSL a été décrit en 1978, et dès 1979 Tektronix a présenté des terminaux graphiques sur lesquels les couleurs se réglaient en HSL[1].
Si votre couleur est dans une autre notation, par exemple OKLCH, Lab ou du code Android, le convertisseur de couleurs l’affiche d’un coup dans toutes les notations.
Comment obtenir des nuances plus claires et plus foncées d’une couleur en HSL ?
hsl(217.2, 91.2%, 59.8%) et les codes HEX obtenus.| Luminosité | HSL | Code HEX |
|---|---|---|
| 10 % | hsl(217.2, 91.2%, 10%) | #021431 |
| 20 % | hsl(217.2, 91.2%, 20%) | #042862 |
| 30 % | hsl(217.2, 91.2%, 30%) | #073C92 |
| 40 % | hsl(217.2, 91.2%, 40%) | #0950C3 |
| 50 % | hsl(217.2, 91.2%, 50%) | #0B64F4 |
| 60 % | hsl(217.2, 91.2%, 60%) | #3C83F6 |
| 70 % | hsl(217.2, 91.2%, 70%) | #6DA2F8 |
| 80 % | hsl(217.2, 91.2%, 80%) | #9DC1FB |
| 90 % | hsl(217.2, 91.2%, 90%) | #CEE0FD |
Quels codes HEX ont les teintes espacées de 30 degrés ?
| Teinte | Teintes dans la spécification CSS | HSL | Code HEX |
|---|---|---|---|
| 0° | rouges | hsl(0, 100%, 50%) | #FF0000 |
| 30° | rouge-jaunes, c’est-à-dire oranges | hsl(30, 100%, 50%) | #FF8000 |
| 60° | jaunes | hsl(60, 100%, 50%) | #FFFF00 |
| 90° | jaune-verts | hsl(90, 100%, 50%) | #80FF00 |
| 120° | verts | hsl(120, 100%, 50%) | #00FF00 |
| 150° | vert-cyans | hsl(150, 100%, 50%) | #00FF80 |
| 180° | cyans | hsl(180, 100%, 50%) | #00FFFF |
| 210° | cyan-bleus | hsl(210, 100%, 50%) | #0080FF |
| 240° | bleus | hsl(240, 100%, 50%) | #0000FF |
| 270° | bleu-magentas | hsl(270, 100%, 50%) | #8000FF |
| 300° | magentas | hsl(300, 100%, 50%) | #FF00FF |
| 330° | magenta-rouges | hsl(330, 100%, 50%) | #FF0080 |
Quel code HEX donnent les nombres de la boîte Couleurs d’Office ?
| Valeurs dans Office | Code HEX | Même couleur en CSS |
|---|---|---|
| 0, 255, 128 | #FF0101 | hsl(0, 100%, 50.2%) |
| 42, 255, 128 | #FFFF01 | hsl(60, 100%, 50.2%) |
| 85, 255, 128 | #01FF01 | hsl(120, 100%, 50.2%) |
| 127, 255, 128 | #01FFFF | hsl(180, 100%, 50.2%) |
| 170, 255, 128 | #0101FF | hsl(240, 100%, 50.2%) |
| 213, 255, 128 | #FF01FF | hsl(300, 100%, 50.2%) |
| 154, 233, 153 | #3C83F6 | hsl(217.1, 91.2%, 60%) |
| 170, 0, 128 | #808080 | hsl(0, 0%, 50.2%) |
| 0, 0, 255 | #FFFFFF | hsl(0, 0%, 100%) |
| 0, 0, 0 | #000000 | hsl(0, 0%, 0%) |
Quelles écritures de la couleur en HSL ce convertisseur gère-t-il ?
| Ce que vous saisissez | Résultat du convertisseur | Comment nous le lisons |
|---|---|---|
| hsl(217.2, 91.2%, 59.8%) | #3B82F6 | L’ancienne écriture CSS avec virgules se lit comme la nouvelle |
| hsl(217.2 91.2% 59.8%) | #3B82F6 | La nouvelle écriture CSS avec espaces est reprise telle quelle |
| 217,2 91,2 59,8 | #3B82F6 | Des nombres seuls avec virgule décimale, sans parenthèses ni pour cent : nous suivons leur ordre |
| H: 217.2 S: 91.2% L: 59.8% | #3B82F6 | Les lettres des canaux suivies de deux-points, comme dans une charte graphique, sont ignorées et nous prenons les nombres |
| hsl(217.2 91.2% 59.8% / 50%) | #3B82F680 | L’opacité indiquée après la barre oblique est ajoutée au résultat comme les deux derniers caractères du code |
| 180°, 100%, 50% | #00FFFF | Le signe degré après la teinte ne gêne pas, nous lisons le nombre seul |
| color: hsl(217, 91%, 60%); | #3C83F6 | Collez la ligne entière depuis une feuille de style, nous en extrayons la couleur |
| 154, 233, 153 | #3C83F6 | Trois nombres sur l’échelle 0–255, soit l’écriture Microsoft Office de la fenêtre Couleurs de Word et Excel : avec le sélecteur Écriture dans cette position, nous les lisons comme des pourcentages |
Où trouver des valeurs HSL, et où coller le code HEX ?
Les deux premiers endroits fournissent des valeurs HSL à convertir, les deux suivants reçoivent le code HEX obtenu.
Boîte Couleurs d’Office
Ouvrez Remplissage de forme et choisissez Autres couleurs de remplissage[5]. Dans l’onglet Personnalisé, passez le modèle de couleur sur HSL et relevez les nombres des zones Teinte, Sat et Lum. Dans le convertisseur, choisissez la notation Microsoft Office (0–255).Feuille de style CSS
Cherchezhsl(ouhsla(dans le fichier et copiez la valeur entière, parenthèses comprises. Le convertisseur l’accepte avec des virgules, des espaces et l’opacité après une barre oblique.Google Docs, Sheets et Slides
Dans la barre d’outils, cliquez sur Couleur du texte ou sur un autre outil proposant des options de couleur. Sous Personnalisé, cliquez sur Ajouter une couleur personnalisée, collez le code HEX et cliquez sur OK[6].Figma
Cliquez sur l’échantillon du remplissage dans la barre latérale droite. Dans la liste des modèles de couleur sous les curseurs, choisissez Hex[7] et collez le code dans le champ voisin.
Convertir d'autres unités en HEX
Sources
- HSL and HSV — Wikipedia (en anglais)
- CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
- CSS Values and Units Module Level 4 — Angle Units — W3C
- Choix des couleurs dans la boîte de dialogue Couleurs — Support Microsoft
- Ajouter un remplissage ou un effet à une forme ou à une zone de texte — Support Microsoft
- Modifier la couleur du texte, des objets et des arrière-plans — Aide Éditeurs Google Docs
- Update fills using the color picker — Figma Help Center
Toutes les valeurs des tableaux ont été calculées à partir des définitions des unités et vérifiées par le calcul avant publication. Les données historiques et les noms des unités locales proviennent des sources citées ci-dessus.
Dernière révision du contenu : · rédigé et vérifié par l'équipe Arteon
Questions fréquentes sur la conversion HSL en HEX
Pourquoi hsl(217, 91%, 60%) donne-t-il un autre code que #3B82F6 ?
Un HSL arrondi à l’entier décrit la couleur avec moins de précision. hsl(217, 91%, 60%) donne #3C83F6, alors que #3B82F6 correspond à hsl(217.2, 91.2%, 59.8%). Le nombre de couleurs modifiées par cet arrondi figure dans un tableau du convertisseur HEX en HSL.
Comment saisir une couleur HSL avec de la transparence ?
Ajoutez l’opacité après une barre oblique, par exemple hsl(217.2 91.2% 59.8% / 50%), ou donnez-la comme quatrième valeur de hsla()[2]. Le convertisseur donne alors le code à huit caractères #3B82F680, dont les deux derniers chiffres portent l’opacité.
Que se passe-t-il si je saisis une saturation hors de 0–100 % ?
Le convertisseur la ramène à la limite de l’intervalle, donc 150 % compte comme 100 %. Une valeur négative compte comme 0 %, comme l’exige la spécification CSS[2]. Il en va de même pour la luminosité.
Une teinte de 360° est-elle la même couleur que 0° ?
Oui. La teinte est un angle, donc 360° désigne le même rouge que 0°[2]. Pour la même raison, 480° donne le même vert que 120°, et −120° le même bleu que 240°.
Comment convertir HSL en valeurs RVB ?
Saisissez la valeur dans le convertisseur de couleurs, qui donne aussi les trois canaux RVB de 0 à 255. Pour hsl(217.2, 91.2%, 59.8%), le résultat est rgb(59, 130, 246).
Comment reporter une couleur de la boîte Office dans une feuille de style ?
Choisissez la notation Microsoft Office (0–255) et saisissez les trois nombres de la boîte Couleurs. Le code HEX du champ de résultat se colle tel quel dans le CSS, et le convertisseur HEX en HSL donne la même couleur en degrés et en pourcentages.
Aidez-nous à améliorer nos outils
Une idée de fonction, un bug repéré ou une proposition d’outil ? Écrivez-nous.