En CSS, une même couleur peut s'écrire d'au moins trois façons différentes, et chacune est pratique pour une tâche différente, du design à l'animation de la transparence.
HEX : un format compact pour le copier-coller
La notation hexadécimale comme #FF5733 code les trois canaux — rouge, vert, bleu — sur deux caractères chacun. C'est le format le plus compact, pratique pour copier depuis une maquette de design, mais presque illisible pour un humain : difficile de deviner d'un coup d'œil quelle teinte se cache derrière une suite de chiffres.
RGB : accès direct à chaque canal
rgb(255, 87, 51) écrit ces mêmes trois canaux sous forme de nombres décimaux de 0 à 255. C'est pratique quand il faut modifier un canal donné par code, par exemple augmenter progressivement le rouge dans une animation JavaScript.
HSL : un choix de teinte intuitif
HSL décrit une couleur par sa teinte (hue, 0–360°), sa saturation et sa luminosité. C'est le format le plus pratique pour choisir une couleur à la main : pour obtenir une version plus sombre de la même teinte, il suffit de diminuer la luminosité, sans recalculer les trois canaux RGB depuis zéro.
Le canal alpha pour la transparence
Les formats rgba() et hsla() ajoutent un quatrième paramètre : l'opacité, de 0 à 1. Le CSS moderne permet aussi de définir la transparence en HEX via deux caractères supplémentaires à la fin, comme #FF573380.
Pourquoi c'est utile
- Convertir rapidement une couleur issue d'une maquette de design vers le format CSS souhaité.
- Choisir une teinte plus sombre ou plus claire de la même couleur via HSL.
- Ajouter de la transparence à une couleur sans changer sa teinte de base.
Chevreul, le chimiste français à l'origine du cercle chromatique moderne
Le curseur de teinte (hue) de ce convertisseur, gradué de 0° à 360° sur un cercle, doit beaucoup à Michel-Eugène Chevreul, chimiste français qui dirigeait les teintures à la Manufacture des Gobelins à Paris. En 1839, il publie De la loi du contraste simultané des couleurs, où il démontre qu'une couleur posée à côté d'une autre modifie la perception des deux — poser du orange à côté du bleu les rend tous deux plus vifs. Ce principe de contraste simultané a directement influencé les peintres impressionnistes et pointillistes comme Seurat, qui juxtaposaient des points de couleur pure plutôt que de les mélanger sur la palette. Le cercle chromatique que ce convertisseur utilise pour représenter la teinte en HSL descend directement des travaux de Chevreul, bien avant l'existence des écrans ou du RGB.