Convertisseur de couleurs HEX RGB HSL
Convertissez une couleur entre HEX, RGB et HSL, avec un aperçu, les trois notations CSS prêtes à copier et la couleur de texte la plus lisible.
Les trois notations, et ce qu’elles décrivent
Une couleur d’écran est toujours un mélange de rouge, de vert et de bleu. Seule la manière de l’écrire change.
| Notation | Exemple | Lecture |
|---|---|---|
| Hexadécimal | #2563EB | Trois octets en base 16 : 25 de rouge, 63 de vert, EB de bleu |
| RGB | rgb(37, 99, 235) | Les mêmes valeurs en décimal, de 0 à 255 |
| HSL | hsl(221, 83%, 53%) | Teinte en degrés, saturation, luminosité |
HEX et RGB sont deux écritures du même triplet : la conversion est purement mécanique, comme dans l’outil texte en hexadécimal. HSL est un changement de point de vue : la teinte parcourt la roue chromatique (0° rouge, 120° vert, 240° bleu), la saturation va du gris à la couleur pure, la luminosité du noir au blanc.
Pourquoi HSL simplifie la construction d’une palette
Avec HSL, décliner une couleur devient arithmétique. Vous gardez la teinte et la saturation, vous faites varier la luminosité : vous obtenez une gamme cohérente pour les états survolé, désactivé, actif. Vous décalez la teinte de 30° : vous obtenez une couleur analogue, qui s’harmonise naturellement. De 180° : la complémentaire. En hexadécimal, les mêmes opérations exigent de recalculer trois octets à la main.
Attention cependant : la luminosité HSL est un calcul géométrique, pas une mesure de perception. Un jaune et un bleu réglés tous deux à 50 % de luminosité n’apparaissent pas du tout aussi clairs à l’œil — le jaune paraît beaucoup plus lumineux. Pour juger de la lisibilité, il faut passer par la luminance relative, ce que fait le calcul de contraste ci-dessus.
Le contraste, une règle d’accessibilité mesurable
Les règles WCAG fixent un rapport de contraste minimal entre un texte et son fond. Ce rapport se calcule à partir de la luminance relative de chaque couleur — une moyenne pondérée des trois canaux (le vert compte pour 72 %, le rouge 21 %, le bleu 7 %) après correction gamma. Il s’exprime de 1:1 (deux couleurs identiques) à 21:1 (noir sur blanc).
| Situation | Niveau AA | Niveau AAA |
|---|---|---|
| Texte courant | 4,5:1 | 7:1 |
| Grand texte (24 px, ou 18,5 px en gras) | 3:1 | 4,5:1 |
| Éléments d’interface et icônes | 3:1 | — |
L’outil compare votre couleur au blanc et au noir, affiche les deux rapports et recommande celui qui dépasse le seuil de 4,5:1. Quand aucune des deux options ne l’atteint, c’est le signe qu’une couleur de fond est trop moyenne : il faut l’assombrir ou l’éclaircir, pas chercher une nuance de gris intermédiaire. En France, l’accessibilité numérique est une obligation légale pour les services publics et certaines entreprises, via le RGAA qui reprend ces seuils.
Les pièges de l’hexadécimal
- La forme courte
#2CFest l’équivalent exact de#22CCFF: chaque chiffre est doublé. Elle ne permet donc d’écrire qu’une couleur sur 4 096. - Huit chiffres :
#2563EBCCajoute un canal alpha, soit la transparence, en deux chiffres hexadécimaux. Le convertisseur ignore cette partie pour ne raisonner que sur la couleur. - La syntaxe moderne accepte les espaces :
rgb(37 99 235 / 80%). Les deux écritures fonctionnent dans tous les navigateurs actuels. - Les noms CSS sont acceptés en entrée :
tomato,rebeccapurple,darkslategray. Il en existe 148.
Tout le calcul — conversion et contraste — se fait dans votre navigateur : aucune couleur n’est envoyée à un serveur. Pour nettoyer la feuille de style où vous collerez ces valeurs, voyez le formateur CSS ; pour contrôler ensuite l’apparence de votre page dans les résultats de recherche, l’aperçu SEO.
Questions fréquentes
Comment choisir entre un texte noir et un texte blanc ?
En comparant les deux rapports de contraste, ce que fait l’outil. La règle intuitive « fond clair, texte noir » échoue sur les couleurs intermédiaires : un bleu moyen peut donner 4,8:1 avec du blanc et seulement 4,3:1 avec du noir. Le calcul tranche là où l’œil hésite.
Que signifient les deux derniers chiffres d’un code à huit caractères ?
Ils expriment l’opacité : 00 pour totalement transparent, FF pour totalement opaque. #000000 suivi de 80 donne un noir à environ 50 % d’opacité. Cette notation est pratique en CSS mais ne change pas la couleur elle-même, c’est pourquoi elle est ignorée dans la conversion.
Pourquoi deux couleurs de même luminosité HSL ne se ressemblent pas ?
Parce que l’œil n’est pas sensible de la même façon aux trois canaux : il perçoit le vert bien plus que le bleu. La luminosité HSL traite les trois à égalité, la luminance relative les pondère. C’est pour cela qu’un jaune et un bleu à 50 % de luminosité donnent des contrastes très différents.
Le résultat est-il identique à celui d’un logiciel de graphisme ?
Pour la conversion HEX, RGB et HSL, oui : ce sont des formules fermées. Les écarts d’un logiciel à l’autre viennent du profil de couleur (sRGB, Display P3) et des arrondis de HSL, qui travaille sur des nombres réels ramenés ici au pourcentage entier le plus proche.