La couleur

Cet article décrit quelques concepts clés liés à la représentation des couleurs à l'écran.

Couleurs à l'écran

Les écrans représentent les couleurs à partir de trois couleurs de base : le rouge, le vert et le bleu. Chaque pixel d'un écran est composé de trois mini lumières de chacune de ces couleurs. Chaque couleur de base est représentée par une tonalité d'une valeur de 0 à 255.

Lorsqu'une seule couleur est active à sa valeur maximale de 255 et que les deux autres sont éteintes à une valeur de 0, la couleur de base qui a une valeur de 255 est représentée à l'écran. Par exemple, une couleur de RVB(255,0,0) représente un rouge éclatant à l'écran, puisque la valeur du rouge est au maximum et que celles du vert et du bleu sont à 0.

Lorsque les trois couleurs de base sont à 0, par exemple RVB(0,0,0), l'écran est noir puisque toutes les couleurs sont éteintes. Lorsque les trois couleurs ont une valeur de 255, par exemple RVB(255,255,255), l'écran est blanc puisque toutes les couleurs se mélangent pour créer une lumière blanche.

Lorsque les couleurs de base ont des valeurs égales, la couleur représentée à l'écran est un gris allant de noir RVB(0,0,0) à blanc RVB(255,255,255). Le gris moyen est représenté par RVB(128,128,128), la moitié de 255.

Enfin, plus de 16 millions de couleurs peuvent être représentées en mélangeant différentes intensités de rouge, de vert et de bleu en variant leurs valeurs respectives de 0 à 255. Les logiciels de création, tels que Photoshop, Illustrator, Gimp ou InkScape, ainsi que les logiciels bureautiques comme ceux de la suite Microsoft Office offre des outils de sélection de couleur permettant de choisir les couleurs plus facilement. Le site Mozilla Developer Network offre lui aussi un sélecteur de couleurs pour les feuilles CSS.

Écrire les couleurs en CSS

Noms de couleurs

Les navigateurs reconnaissent plus d'une centaine de noms de couleurs tels que white, black, red, green, blue, cyan, magenta, yellow et même des noms de couleurs plus complexes tels que lightgrey, darkgrey, aliceblue, antiquewhite ou aquamarine1. Étant donné que ces noms sont sont assez difficiles à retenir, ils sont relativement peu utilisés, sauf pour les couleurs de base.

RGB et RGBA

Le sigle RGB est utilisé en CSS pour représenter les couleurs de base Red, Green et Blue. Pour représenter les couleurs on utilise le sigle avec les valeurs de chaque couleur de base entre parenthèses. Par exemple :

rgb(255,255,0); représente la couleur jaune.

CSS3 introduit la notion d'opacité dans les choix de couleurs. En ajoutant une composante Alpha, soit une quatrième valeur représentant le degré d'opacité, on peut désormais choisir une couleur dans un degré d'opacité variant de 0 à 1, 0 représentant une transparence complète et 1 représentant une opacité totale. Par exemple :

rgba(255,0,255,0.5); représente la couleur magenta avec une opacité de 50 %.

Notation hexadécimale

Les valeurs de rouge, de vert et de bleu peuvent être représentées de manière plus courte grâce à la notation hexadécimale. Dans cette notation, les valeurs de 0 à 255 sont représentées par deux caractères de 0 à F, les lettres de A à F représentant les valeurs de 10 à 15. Le premier caractère d'une paire hexadécimale représente entre 0 et 15 paquets de 16, alors que le deuxième caractère représente un nombre de 0 à 15. Par exemple :

#00a5ff; ou les trois paires 00, a5, ff, représentent :

Rouge à 0 (0 + 0), Vert à 165 (10 X 16 + 5), Bleu à 255 (15 X 16 + 15), donc un bleu ciel rgb(0,165,255).

HSL et HSLA

L'outil en ligne HSL Color Picker s'avère très intéressant pour mieux comprendre les modes de couleurs HSL et HSLA.