Convertir une couleur entre HEX, RGB et HSL
Publié le · Mis à jour le 3 min de lecture
HEX, RGB et HSL sont trois manières d’écrire la même couleur. On les rencontre dans un logiciel de dessin, une feuille de style, un outil de maquette ou une charte graphique, et on passe sans cesse de l’une à l’autre. L’outil affiche les trois à la fois et accepte les écritures courantes.
Trois écritures d’une même couleur
Explorer et convertir des couleurs affiche par défaut les trois formes, avec un aperçu de la couleur. Le HEX est une suite de six chiffres et lettres précédée d’un dièse. Le RGB donne les quantités de rouge, de vert et de bleu, de 0 à 255. Le HSL décrit la teinte en degrés, la saturation et la luminosité en pourcentage, ce qui est souvent plus intuitif pour éclaircir ou foncer une couleur. Pour le vert #2F4A3F :
| Forme | Résultat |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Les trois boutons HEX, RGB et HSL du panneau réduisent le résultat à une seule forme, pratique à copier telle quelle.
Les écritures acceptées
| Écriture | Exemple | Résultat en HEX |
|---|---|---|
| HEX court | #fff | #ffffff |
| HEX avec transparence | #2F4A3F80 | #2f4a3f80 |
| RGB avec virgules | rgb(47, 74, 63) | #2f4a3f |
| RGB avec espaces | rgb(47 74 63) | #2f4a3f |
| RGB en pourcentages | rgb(100%, 0%, 0%) | #ff0000 |
| HSL avec espaces | hsl(156 22% 24%) | #304b40 |
Les noms de couleurs comme « rouge », et les valeurs hors de 0 à 255 comme rgb(300, 0, 0), sont refusés avec un message qui liste les écritures acceptées.
La transparence
Une transparence s’écrit en HEX sur huit chiffres, ou après une barre oblique avec des espaces. La couleur rgb(47 74 63 / 50%) donne #2f4a3f80 en HEX et rgba(47, 74, 63, 0.5) en RGB. À l’inverse, #2F4A3F80 donne une opacité de 0,502, parce que 80 en hexadécimal vaut 128 sur 255.
Pourquoi un aller-retour change d’un niveau
Le HSL est affiché en nombres entiers : la teinte en degrés, la saturation et la luminosité en pourcentage. Revenir du HSL au HEX retombe donc sur une couleur voisine, pas toujours sur celle de départ.
| Départ | HSL affiché | Retour en HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
L’écart est d’un niveau sur chaque canal, invisible à l’œil. Pour un jeton de design ou une marque, gardez le HEX d’origine comme référence et ne repassez pas par le HSL.
Les gris
Un gris a une saturation nulle et une teinte sans effet : #808080 donne rgb(128, 128, 128) et hsl(0, 0%, 50%).
Ce que l’outil ne mesure pas
Une conversion de format ne dit rien de la lisibilité. L’outil ne calcule pas le contraste entre un texte et son fond : vérifiez-le à part avant de publier. Le cas d’un QR code, où le contraste décide de la lecture, est traité dans Créer un QR code qui se scanne du premier coup.
Pour quels usages
Un graphiste qui transmet une couleur à un développeur, une personne qui adapte une feuille de style, un enseignant qui prépare un support : la même couleur s’écrit de trois façons selon l’outil.
Vérifier une conversion
- Collez la couleur dans le champ : l’aperçu doit correspondre à ce que vous attendez.
- Copiez la forme demandée par votre système.
- Pour garder la couleur exacte, conservez le HEX ou le RGB plutôt que le HSL.
Questions fréquentes
- Comment convertir du HEX en RGB ?
- Collez la couleur dans l’outil, qui affiche les trois formes à la fois, par exemple #2F4A3F, rgb(47, 74, 63) et hsl(156, 22%, 24%).
- Pourquoi un aller-retour par le HSL change-t-il la couleur d’un niveau ?
- Le HSL est affiché en nombres entiers. Gardez le HEX d’origine comme référence.
- Comment écrire une transparence ?
- En HEX sur huit chiffres, ou en RGB avec une barre oblique, par exemple rgb(47 74 63 / 50%).
- L’outil vérifie-t-il la lisibilité du texte ?
- Non, il ne calcule pas le contraste entre un texte et son fond : vérifiez-le à part.