En bref : HEX, RGB et HSL décrivent tous les mêmes couleurs, mais autrement. HEX et RGB sont deux notations des mêmes valeurs rouge-vert-bleu ; HSL les réexprime en teinte, saturation et luminosité, bien plus faciles à ajuster à la main. Savoir quel format choisir évite bien des devinettes lorsqu'on assortit ou retouche des couleurs.
Une couleur sur le web se ramène à trois canaux — rouge, vert et bleu — mais la façon d'écrire ces canaux change la facilité de raisonner.
HEX et RGB : la même chose, écrite deux fois
RGB liste les trois canaux directement : rgb(37, 99, 235). HEX empaquette les valeurs identiques en une chaîne hexadécimale : #2563EB, où 25, 63 et EB sont les octets rouge, vert et bleu. Ils sont interchangeables — HEX est compact et courant dans les outils de design, RGB est pratique en code car on peut calculer chaque canal. Aucun n'est plus « exact » ; ce sont deux orthographes d'une même couleur.
HSL : le format fait pour retoucher
HSL décrit une couleur par teinte (sa position sur la roue chromatique, 0–360°), saturation (son intensité, 0–100 %) et luminosité (sa clarté, 0–100 %). C'est le format à utiliser pour ajuster plutôt que remplacer une couleur : baissez la luminosité pour un état survol, réduisez la saturation pour une variante feutrée, ou décalez la teinte pour trouver une couleur complémentaire. Faire les mêmes retouches en HEX, c'est deviner des valeurs d'octets.
Alpha et HEX à 8 chiffres
La transparence s'exprime avec un canal alpha : rgba() et hsla() ajoutent une quatrième valeur de 0 (transparent) à 1 (opaque). Le CSS moderne prend aussi en charge le HEX à 8 chiffres, où les deux derniers caractères encodent l'alpha — #2563EB80 est le même bleu à environ 50 % d'opacité.
Le CMJN est un autre monde
HEX, RGB et HSL sont tous des modèles d'écran (lumière additive). Le CMJN est pour l'impression (encre soustractive). Une conversion entre eux est toujours approximative car les deux ne reproduisent pas exactement la même gamme, alors traitez une conversion écran-vers-impression comme un point de départ à contrôler, pas comme une correspondance exacte.
Un flux pratique
- Collez la couleur de départ — dans n'importe quel format — dans le Convertisseur de Couleurs pour voir tous les formats d'un coup.
- Passez en HSL pour construire des variantes : ajustez la luminosité pour les états, la saturation pour les tons feutrés.
- Ajoutez l'alpha avec
rgba()/hsla()ou le HEX à 8 chiffres là où il faut de la transparence. - Utilisez l'aperçu de dégradé pour générer un extrait CSS prêt pour deux couleurs ou plus.
Si vous travaillez une palette en lot, convertissez plusieurs couleurs à la fois (séparées par des virgules ou des retours à la ligne) et gardez les résultats près de vos notes avec le Compteur de Caractères.
Erreurs courantes à éviter
- Retoucher les couleurs en HEX quand HSL rendrait l'ajustement évident.
- Attendre d'une conversion CMJN qu'elle corresponde exactement à l'écran.
- Oublier le canal alpha et obtenir une couleur opaque là où vous vouliez de la transparence.
- Mélanger les formats de façon incohérente dans une feuille de style.