Théorie et utilisation de la couleur

Comment s'affichent les couleurs sur un écran d'ordinateur ? et sur le web ? Après avoir répondu à ces questions qui vous permettrons de mieux comprendre comment fonctionne l'univers coloré de votre écran, je vous propose un document plus général sur la couleur et son utilisation. J'y aborde des thèmes comme la création d'harmonies colorées, la perception des couleurs, la psychologie des couleurs.

L'affichage des couleurs sur écran

Pour afficher une image, ou une couleur, l'ordinateur utilise un système binaire. Les informations d'une image couleur sont généralement codées en 24bits, soit 8 bits par couche dans le mode RVB (cf. la première partie du document sur les espaces colorimétriques). Les valeurs d’intensité de chacune des composantes RVB (rouge, vert, bleu) vont de 0 (noir) à 255 (blanc) (soit 28). Le codage RVB permet donc de définir 16 777 216 couleurs (256x256x256), soit plus que l'œil humain ne peut en discerner.

La couleur sur le WEB

Lorsqu'on souhaite attribuer une couleur à un élément HTML, on utilise un système hexadécimal pour définir cette couleur.
Exemple dans une feuille de style de l'attribution d'une couleur :

color : #39A8EF;

Le symbole # placé devant le code hexadécimal fait partie de la syntaxe CSS et permet d'identifier plus facilement ce dernier. Si l'on devait traduire cette couleur en mode binaire, celle-ci correspondrait à un nombre de 24 chiffres. Comparativement, pour la même couleur, une combinaison hexadécimal ne contiendra que 6 caractères. Ce système semble donc plus simple à utiliser pour décrire les couleurs en code informatique.

Le système hexadécimal (fondé sur une base 16) contient 10 chiffres (de 0 à 9) et 6 lettres (de A à F) : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Chaque paire de caractère du code hexadécimal représente une des 3 composantes RVB (Rouge, Vert, Bleu).

RR = valeur hexadécimale de l'octet codant la primaire rouge
VV = valeur hexadécimale de l'octet codant la primaire vert
BB = valeur hexadécimale de l'octet codant la primaire bleu

Pour convertir une couleur hexadécimale en couleur RVB, il suffit d'appliquer l'opération suivante :

16 x (premier chiffre hexa) + 1 x (second chiffre hexa).

Par exemple, la conversion du code hexadécimal #80FA28 en RVB donne ceci :

#80 = 16 x (8) + 1 x (0) = 128 pour la couche de rouge
#FA = 16 x (15) + 1 x (10) = 250 pour la couche de vert
#28 = 16 x (2) + 1 x (8) = 40 pour la couche de bleu

La palette des couleurs web sécurisées

Cube couleur

Imaginez des écrans d'ordinateur 8bits capables d'afficher seulement 256 couleurs (c'était encore le cas il y a quelques décennies). Le choix est restreint et se réduit à une palette où les primaires (Rouge, Vert, Bleu) ne peuvent prendre que 6 valeurs chacune (#00, #33, #66, #99, #CC, #FF). Cette palette web sécurisée contient donc 216 couleurs (6x6x6). Même si elle n'est plus vraiment d'actualité dans la mesure où la majorité des écrans d'ordinateurs affichent plusieurs milliers de couleurs, elle reste appréciée car elle présente des combinaisons de couleur homogènes grâce à des intervales réguliers. Comme le montre cette vidéo, le cube des couleurs web est donc composé des trois couleurs primaires (RVB), chacune possédant 6 niveaux de luminosité et de saturation différents. Les autres couleurs résultent du mélange de celles-ci.

cube couleur RVB

Voici également une application interactive réalisée à partir d'un programme de Benjamin FRY sur Processing représentant un cube RVB de plusieurs millions de couleurs. Le programme original a été modifié pour faire apparaître ici le cube RBV en couleurs web sécurisées. Même intérêt que la vidéo, l'interactivité en plus !

AperçuFichier attachéTaille
COULEUR.pdf24.32 Mo
application.macosx.zip249.15 Ko
application.windows.zip226.4 Ko