Convertir un code HEX en HSL
Saisissez un code HEX et les valeurs HSL s’affichent pendant la frappe : #3B82F6 donne hsl(217.2, 91.2%, 59.8%). Le résultat a une décimale, donc le ressaisir redonne la même couleur. Le sélecteur fournit la notation CSS ou les nombres 0–255 de la boîte Couleurs d’Office.
Comment convertir un code HEX en HSL ?
Découpez le code en trois canaux RVB et divisez chacun par 255. Le canal le plus élevé et le plus faible donnent la luminosité et la saturation, et le plus élevé fixe la teinte[1].
Formule : L = (max + min) ÷ 2, S = (max − L) ÷ min(L, 1 − L), et H est un angle compté à partir du canal le plus élevé.
Prenons #3B82F6. Les canaux valent 59, 130 et 246. Divisés par 255, ils donnent 0,231, 0,510 et 0,965. La moyenne du canal le plus élevé et du plus faible est 0,598, donc la luminosité vaut 59,8 %. La formule de la saturation donne 91,2 %.
Le bleu est le canal le plus fort, le calcul de la teinte part donc de 240 degrés. Le rouge étant plus faible que le vert, on retire 22,8 degrés et la teinte vaut 217,2°. La couleur complète s’écrit en CSS hsl(217.2, 91.2%, 59.8%).
Le convertisseur HEX en RVB fait la première étape seule, et le convertisseur de couleurs part directement de valeurs RVB.
Qu’est-ce que le modèle de couleur HSL ?
HSL décrit une couleur par trois valeurs. La teinte (hue en anglais) est un angle sur le cercle chromatique, où 0° est le rouge, 120° le vert et 240° le bleu. La saturation indique la quantité de couleur : 0 % donne un gris et 100 % la couleur pleine. La luminosité (lightness) vaut 0 % pour le noir et 100 % pour le blanc, et une couleur ordinaire se situe à 50 %[1]. En français, ce système porte aussi le sigle TSL, pour teinte, saturation, luminosité[2].
La spécification CSS explique à quoi sert cette notation. Avec des nombres RVB, il est difficile de deviner comment obtenir une version plus claire de la même couleur, alors qu’en HSL vous changez une seule valeur[1].
George Joblove et Donald Greenberg ont décrit le modèle dans le numéro d’août 1978 de la revue Computer Graphics, à côté du modèle HSV d’Alvy Ray Smith[3]. Il est arrivé dans CSS avec CSS Color Module Level 3, devenu recommandation du W3C le 7 juin 2011[4].
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.
Couleurs CSS nommées : code HEX et HSL
| Nom en CSS | Code HEX | HSL en CSS | HSL dans Office (0–255) |
|---|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) | 170, 0, 0 |
| white | #FFFFFF | hsl(0, 0%, 100%) | 170, 0, 255 |
| red | #FF0000 | hsl(0, 100%, 50%) | 0, 255, 128 |
| lime | #00FF00 | hsl(120, 100%, 50%) | 85, 255, 128 |
| blue | #0000FF | hsl(240, 100%, 50%) | 170, 255, 128 |
| yellow | #FFFF00 | hsl(60, 100%, 50%) | 42, 255, 128 |
| aqua | #00FFFF | hsl(180, 100%, 50%) | 127, 255, 128 |
| fuchsia | #FF00FF | hsl(300, 100%, 50%) | 213, 255, 128 |
| silver | #C0C0C0 | hsl(0, 0%, 75.3%) | 170, 0, 192 |
| gray | #808080 | hsl(0, 0%, 50.2%) | 170, 0, 128 |
| maroon | #800000 | hsl(0, 100%, 25.1%) | 0, 255, 64 |
| olive | #808000 | hsl(60, 100%, 25.1%) | 42, 255, 64 |
| green | #008000 | hsl(120, 100%, 25.1%) | 85, 255, 64 |
| purple | #800080 | hsl(300, 100%, 25.1%) | 213, 255, 64 |
| teal | #008080 | hsl(180, 100%, 25.1%) | 127, 255, 64 |
| navy | #000080 | hsl(240, 100%, 25.1%) | 170, 255, 64 |
| orange | #FFA500 | hsl(38.8, 100%, 50%) | 27, 255, 128 |
| rebeccapurple | #663399 | hsl(270, 50%, 40%) | 191, 128, 102 |
En quoi HSL diffère-t-il de HSB et de l’échelle d’Office ?
| Code HEX | HSL en CSS | HSB | HSL dans Office (0–255) |
|---|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | 217,2° ; 76 % ; 96,5 % | 154, 233, 153 |
| #EF4444 | hsl(0, 84.2%, 60.2%) | 0° ; 71,5 % ; 93,7 % | 0, 215, 154 |
| #22C55E | hsl(142.1, 70.6%, 45.3%) | 142,1° ; 82,7 % ; 77,3 % | 100, 180, 116 |
| #F59E0B | hsl(37.7, 92.1%, 50.2%) | 37,7° ; 95,5 % ; 96,1 % | 26, 235, 128 |
| #8B5CF6 | hsl(258.3, 89.5%, 66.3%) | 258,3° ; 62,6 % ; 96,5 % | 183, 228, 169 |
| #1E293B | hsl(217.2, 32.6%, 17.5%) | 217,2° ; 49,2 % ; 23,1 % | 154, 83, 45 |
| #FAFAFA | hsl(0, 0%, 98%) | 0° ; 0 % ; 98 % | 170, 0, 250 |
| #333333 | hsl(0, 0%, 20%) | 0° ; 0 % ; 20 % | 170, 0, 51 |
Combien de décimales faut-il en HSL ?
| Code HEX | Résultat du convertisseur | Mêmes valeurs arrondies | Couleur des valeurs arrondies |
|---|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | hsl(217, 91%, 60%) | #3C83F6 |
| #EF4444 | hsl(0, 84.2%, 60.2%) | hsl(0, 84%, 60%) | #EF4343 |
| #22C55E | hsl(142.1, 70.6%, 45.3%) | hsl(142, 71%, 45%) | #21C45D |
| #F59E0B | hsl(37.7, 92.1%, 50.2%) | hsl(38, 92%, 50%) | #F59F0A |
| #8B5CF6 | hsl(258.3, 89.5%, 66.3%) | hsl(258, 90%, 66%) | #895AF6 |
| #1E293B | hsl(217.2, 32.6%, 17.5%) | hsl(217, 33%, 18%) | #1F2A3D |
style.color et l’avons relue avec getComputedStyle.Quelles écritures du code HEX ce convertisseur gère-t-il ?
| Ce que vous saisissez | Résultat du convertisseur | Comment nous le lisons |
|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | Un code avec le croisillon, exactement tel qu’il figure dans une feuille de style |
| 3b82f6 | hsl(217.2, 91.2%, 59.8%) | Le croisillon n’est pas nécessaire, et les minuscules se lisent comme les majuscules |
| #38F | hsl(215, 100%, 60%) | La forme courte à trois caractères, nous la développons nous-mêmes : #38F se lit #3388FF |
| #3B82F680 | hsla(217.2, 91.2%, 59.8%, 0.5) | Les deux derniers caractères sont l’opacité : nous la reprenons et rendons le résultat en hsla |
| color: #3B82F6; | hsl(217.2, 91.2%, 59.8%) | Collez la ligne entière depuis une feuille de style ou les outils du navigateur, nous en extrayons le code |
| "#3B82F6" | hsl(217.2, 91.2%, 59.8%) | Les guillemets d’un fichier JSON ou de JavaScript sont ignorés et nous lisons le code seul |
| ##3B82F6 | hsl(217.2, 91.2%, 59.8%) | Le double croisillon qui apparaît quand on colle à côté d’un croisillon déjà saisi ne gêne pas |
| #EF4444 | 0, 215, 154 | Avec le sélecteur Écriture réglé sur Microsoft Office, le résultat arrive sur l’échelle 0–255, celle de la fenêtre Couleurs de Word et Excel |
Où allez-vous utiliser le résultat HSL ?
Les feuilles de style et les navigateurs utilisent la notation CSS, et les logiciels Office l’échelle 0–255 : choisissez donc la bonne notation dans le sélecteur avant de copier le résultat.
Feuille de style CSS
Collez le résultat comme valeur d’une propriété, par exemplecolor: hsl(217.2, 91.2%, 59.8%);. CSS accepte aussi la forme séparée par des espaces, avec l’opacité après une barre oblique :hsl(217.2 91.2% 59.8% / 50%)[1].Figma
Sélectionnez le calque et cliquez sur l’échantillon du remplissage dans la barre latérale droite. Sous les curseurs de teinte et d’opacité, ouvrez la liste des modèles de couleur et choisissez HSL[5].PowerPoint, Word et Excel
Sélectionnez une forme, ouvrez Remplissage de forme et choisissez Autres couleurs de remplissage[7]. Dans l’onglet Personnalisé, passez le modèle de couleur sur HSL et tapez les trois nombres d’Office dans les zones Teinte, Sat et Lum.Chrome
Faites un clic droit sur l’élément et choisissez Inspecter. Dans le volet des styles, cliquez sur l’échantillon de couleur en maintenant la touche Maj enfoncée et choisissezhsl(X X X / X)dans la liste qui s’ouvre[8]. La valeur du volet passe alors en HSL.
Convertir HEX en d'autres unités
Sources
- CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
- Teinte saturation lumière — Wikipédia
- HSL and HSV — Wikipedia (en anglais)
- CSS Color Module Level 3 — HSL color values — W3C
- Update fills using the color picker — Figma Help Center
- 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
- Inspectez et déboguez les couleurs HD et non HD à l’aide du sélecteur de couleur — Chrome for Developers
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 HEX en HSL
Quelle notation HSL choisir dans le convertisseur ?
Choisissez CSS pour les feuilles de style et les outils de développement du navigateur. Choisissez Microsoft Office (0–255) quand vous reportez la couleur dans la boîte de dialogue Couleurs de Word, Excel ou PowerPoint, car chacune des trois valeurs y va de 0 à 255[6].
Pourquoi une couleur saisie dans Office revient-elle avec un autre code HEX ?
La boîte Couleurs calcule HSL en nombres entiers sur une échelle de 0 à 255, ce qui fait perdre un peu de précision. Nous l’avons vérifié dans Office 2016 : #3B82F6 y apparaît comme 154, 233 et 153, et ces trois nombres ressaisis donnent #3C83F6. Le convertisseur utilise le même algorithme et vous montre donc exactement la couleur que vous verrez dans le logiciel. Pour saisir des nombres lus dans la boîte, utilisez le convertisseur HSL en HEX avec la notation Office.
Comment écrire une couleur HSL avec de la transparence ?
Saisissez un code à huit caractères, par exemple #3B82F680. Le convertisseur donne alors hsla(217.2, 91.2%, 59.8%, 0.5), où le quatrième nombre est l’opacité de 0 à 1[1]. La notation Office ne donne que les trois nombres de teinte, saturation et luminosité.
Pourquoi le jaune et le bleu ont-ils la même luminosité en HSL ?
La luminosité HSL est la moyenne du canal le plus fort et du plus faible, elle ne correspond donc pas à la clarté perçue par l’œil. La spécification CSS prend exactement cet exemple : hsl(60 100% 50%) et hsl(240 100% 50%) ont tous deux 50 %, pourtant le jaune paraît bien plus clair[1].
Comment obtenir une nuance plus claire d’une couleur en HSL ?
Gardez la teinte et la saturation telles quelles et augmentez seulement la luminosité. hsl(217.2, 91.2%, 59.8%) à 70 % de luminosité donne #6DA2F8. Une échelle de luminosité toute prête et la conversion de n’importe quelle valeur HSL en code se trouvent sur le convertisseur HSL en HEX.
Une couleur en HSL a-t-elle le même contraste qu’en HEX ?
Oui, car les deux notations décrivent la même couleur et le contraste dépend de la couleur. Collez le résultat dans le vérificateur de contraste des couleurs, qui accepte HSL comme un code HEX.
Aidez-nous à améliorer nos outils
Une idée de fonction, un bug repéré ou une proposition d’outil ? Écrivez-nous.