RVB et codes hexadécimaux

Avec 256 niveaux pour chacun du rouge, du vert et du bleu, un écran peut adresser 256 × 256 × 256 = 16 777 216 couleurs, et chacune est un point à l'intérieur d'un cube.

Trois nombres, trois axes

Dans l'espace colorimétrique sRVB utilisé sur le web, une couleur s'écrit avec trois valeurs de canal : rouge, vert et bleu. Dans le code courant, chaque canal est un entier de 0 à 255, la plage qui tient sur huit bits. Un canal à 0 signifie que cette lumière est éteinte. Un canal à 255 signifie qu'elle est à pleine intensité. Ainsi rgb(255 0 0) est le rouge le plus fort que l'écran puisse montrer, rgb(0 0 0) est le noir et rgb(255 255 255) est le blanc.

Trois nombres qui parcourent chacun une plage forment une boîte. Place le rouge le long d'une arête, le vert sur une autre et le bleu sur la troisième, et chaque couleur a sa place dans un cube. Le modèle ci-dessus dessine ce cube avec 512 petits blocs, huit pas le long de chaque arête. Le noir est dans un coin. Le blanc est dans le coin opposé. Les trois coins voisins du noir sont le rouge pur, le vert pur et le bleu pur. Les trois coins voisins du blanc sont le cyan, le magenta et le jaune, chacun fait de deux canaux pleins. Active les étiquettes et suis les arêtes du noir au blanc : chaque chemin passe par une primaire et une secondaire.

La ligne en pointillés du noir au blanc est l'axe des gris. Chaque point dessus a des valeurs égales de rouge, de vert et de bleu, comme rgb(128 128 128). Les couleurs éloignées de cette ligne sont vives. Celles qui en sont proches sont grisâtres. C'est le premier indice de l'idée derrière le modèle TSL de l'unité suivante : la distance à l'axe des gris mesure à quel point quelque chose est coloré.

Lire un code hexadécimal

CSS permet aussi d'écrire les mêmes trois nombres en hexadécimal, après un signe #. L'hexadécimal compte par seize avec les chiffres de 0 à 9 et les lettres de a à f, où a vaut 10 et f vaut 15. Deux chiffres hexadécimaux couvrent 16 × 16 = 256 valeurs, exactement un canal. Un code de six chiffres est donc trois paires : rouge, vert, bleu. CSS Color 4 note que la casse des lettres n'a pas d'importance, #00ff00 et #00FF00 sont donc la même couleur.

Pour lire une paire, multiplie le premier chiffre par 16 et ajoute le second. Pour c3, cela fait 12 × 16 + 3 = 195. Pour ff, 15 × 16 + 15 = 255, le maximum. Pour 80, 8 × 16 = 128, presque exactement la moitié. Un code à trois chiffres comme #f80 est une abréviation : chaque chiffre est écrit deux fois de suite, donc #f80 signifie #ff8800. Tape un code dans la case Hex sous le modèle et le repère saute à ce point du cube.