Système RVB
Un informaticien ne voit pas la vie en rose mais, moins poétiquement, en #FFCCFF. Pourquoi ? Étudions quelques façons de coder informatiquement les couleurs et vous comprendrez tout. Précision : nous n’aborderons pas les transparences.
Couleurs primaires
Les couleurs visibles par l’œil humain sont des ondes dont la longueur se situe approximativement entre 400 nm pour le violet à 750 nm pour le rouge.
Nos yeux comportent environ cinq millions de cônes, qui sont des cellules de vision diurne. Il en existe trois types selon qu'elles sont sensibles au rouge, au vert ou au bleu.
Ainsi les capteurs d’appareils photo numériques ou les écrans de télévision comportent-ils des filtres de ces trois couleurs primaires. Toutes les couleurs visibles en sont une combinaison. La somme des trois donne le blanc et l’absence de couleur est le noir.
Le mélange en parts égales de rouge et de vert donne le jaune, de rouge et de bleu donne le magenta (un rose soutenu), de vert et de bleu donne le cyan (un bleu clair).
Cette synthèse, dite additive, n’est pas très intuitive car lorsqu’on mélange des peintures, ce sont les réflexions des couleurs que l’on voit. Ainsi, c’est par exemple le cyan plus le jaune qui permettent d’obtenir du vert. C’est la synthèse soustractive. Pourquoi soustractive ? Par exemple, sur du papier, le jaune est le pigment qui supprime la composante bleue de la lumière qui se réfléchit sur la feuille.
Ce système est utilisé en imprimerie. Toutefois, le mélange à parts égales du jaune, du cyan et du magenta ne donne pas du noir mais du gris foncé. C’est pourquoi une impression en quadrichromie réclame, comme son nom l’indique, une autre couleur : le noir. D’autres encres peuvent être ajoutées, par exemple le doré qui a un aspect métallisé. Mais ce n’est pas une couleur qui peut apparaître sur un écran.
Les combinaisons de couleurs primaires peuvent être résumées par le schéma suivant :
Triplets RVB
Lorsque les couleurs sont codées informatiquement, la profondeur est souvent de 24 bits, ce qui se traduit par \(256^3\) soit environ 16,8 millions de couleurs (format JPG par exemple).
On peut donc décrire une couleur par un triplet de trois nombres compris entre 0 et 255. Le premier traduit la composante rouge, le deuxième la verte et le dernier la bleue. Le mélange des trois couleurs primaires donne l’une des 16,8 millions de couleurs possibles. Vous comprendrez pourquoi on l’appelle code RVB (RGB en anglais).
Ainsi (255, 255, 255) est le blanc, (0, 0, 0) est le noir, (255, 0, 0) est le rouge, etc. Lorsque les trois nombres sont égaux et compris entre 1 et 254, la couleur obtenue est un gris.
Avec Python, si vous appelez la bibliothèque Pillow, vous pouvez utiliser ces triplets (voir en page de seuillage l’exemple de la coloration en rouge).
Toujours avec Python, si vous appelez la bibliothèque Turtle pour colorer des formes géométriques et que vous utilisez la fonction fillcolor, les triplets sont composés de pourcentages. Ainsi le programme ci-dessous permet de dessiner un rectangle bleu foncé avec \(10\%\) de rouge, \(20\%\) de vert et \(50\%\) de bleu (attention, n'additionnez pas ces chiffres, c'est un peu comme si l'on avait dilué \(10\%\) de rouge dans de l'eau, etc.).
from turtle import *
fillcolor(0.1,0.2,0.5)
begin_fill()
forward(200)
left(90)
forward(100)
left(90)
forward(200)
left(90)
forward(100)
end_fill()
done()
Code couleur HTML
Le code couleur (ou Hex, pour les intimes) est un moyen simple de déterminer une couleur avec peu de caractères. Il prend la forme d’un croisillon suivi de six caractères. Les deux premiers dosent le rouge, les deux suivants le vert et les deux derniers le bleu.
Il est codé en hexadécimal. Les caractères possibles sont donc au nombre de 16, soit 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E et F. Nous avons vu qu’une couleur primaire est codée sur deux caractères. Elle existe donc en \(16^2 = 256\) nuances et comme une couleur qui apparaît à l’écran est un mélange de trois primaires, nous retrouvons bien nos \(256^3\) couleurs visibles.
C’est ce type de codage qui est utilisé en HTML (et surtout en CSS). Certains éditeurs de code peuvent d’ailleurs montrer un infobulle de couleur lorsqu’on survole le code Hex avec la souris. Exemple ci-dessous avec Dreamweaver :
Notez que le code Hex peut aussi être employé avec Python.
Il faut beaucoup d’habitude pour estimer la couleur associée à un code donné. Les gris sont les moins difficiles à deviner puisque leur code reproduit trois fois la même paire de caractère. Exemple : gris argent = #C0C0C0.
À l’inverse, pour connaître le code à partir d’une teinte, on peut se servir d’une palette disponible sur le web.
Par exemple :
https://htmlcolorcodes.com/fr/
Noms de couleurs
Le HTML connaît 140 noms de couleurs. Par exemple, pour colorer un espace en bleu acier, inutile de chercher le triplet ou le code Hex correspondant, il suffit de préciser steelblue. Parce que bien entendu, ces noms sont en anglais.
Un script Python peut aussi inclure des noms de couleurs en toutes lettres et parfois en abrégé.
Pour plus de précisions et pour connaître les correspondances entre les codes :
https://fr.wikipedia.org/wiki/Couleur_du_Web
