Trois notations, une seule couleur
HEX, RGB et HSL décrivent la même couleur de trois façons. Le rendu à l’écran est identique : prenez celle qui vous arrange à cet endroit.
HEX s’écrit #RRGGBB ; c’est ce que les outils de conception exportent et ce que les développeurs collent. Court et facile à copier.
RGB détaille le rouge, le vert et le bleu de 0 à 255. C’est la forme utile quand du code calcule une couleur ou dessine directement sur un canevas.
HSL donne la teinte (de 0 à 360 degrés), la saturation et la luminosité. Elle correspond à la façon dont on raisonne réellement pour ajuster une couleur.
Là où HSL fait la différence
Supposons qu’il faille un état survol pour un bouton. En HEX, rien n’indique comment assombrir un peu #3E6FF4 : on bricole des chiffres et on compare à l’œil. En HSL, on baisse la luminosité de 10. La teinte et la saturation ne bougent pas, les deux couleurs appartiennent visiblement à la même famille.
Le même geste construit une palette. Fixez la teinte et échelonnez la luminosité pour une gamme de nuances ; faites tourner la teinte de 120 degrés pour des couleurs contrastées équilibrées.
Si vos couleurs vivent dans des variables CSS, stocker les canaux HSL séparément permet de déplacer tout le thème en modifiant un seul nombre de teinte.
L’alpha
Un HEX de huit chiffres comme #RRGGBBAA porte l’opacité sur les deux derniers : 80 vaut environ 50%, FF est totalement opaque. Tous les navigateurs actuels comprennent cette écriture.
Quand il faut de la transparence, utilisez rgba() ou le HEX à huit chiffres, mais gardez en tête que superposer une couleur translucide ne revient pas à choisir d’emblée une teinte plus claire. Changez le fond et la couleur translucide change avec lui.
Ce que cet outil sait lire
Il accepte les HEX de trois, quatre, six et huit chiffres, rgb() et rgba(), hsl() et hsla(), aussi bien dans l’ancienne syntaxe à virgules que dans la syntaxe moderne à espaces.
Les couleurs nommées comme red ou rebeccapurple ne sont pas interprétées, pas plus que des espaces plus récents comme oklch(). Pour une couleur nommée, relevez sa valeur HEX dans les outils de développement du navigateur et collez celle-ci.