Rôle de la couleur
Au même titre que la typographie, la mise en page, le graphisme général, la couleur sert à :
- définir le ton d'un site
- hiérarchiser les informations
- garantir l'homogénéité du site : les couleurs des fonds, des polices de caractères et des objets graphiques doivent se compléter harmonieusement.
La couleur est un excellent moyen de communication visuelle, aussi est-il indispensable d'en saisir toute la puissance et l'importance.
Attention à la connotation des couleurs (en fonction des cultures, du public visé et du message à faire passer).
Terminologie
Une couleur se définit par les 3 paramètres suivants :
- sa teinte dominante
- sa saturation : intensité, "pureté" chromatique
- sa luminance ou luminosité : intensité lumineuse émise
- Spectre : toutes les couleurs possibles d'un espace chromatique tel que RVB ou CMJN
- Teinte : point spécifique du cercle chromatique ou du spectre des couleurs
- Valeur : plage de couleur, du pâle au vif.
Luminosité ou absence de luminosité.
- Saturation : intensité d'une couleur. Les couleurs désaturées sont dites assourdies.
- Contraste : écart entre les valeurs
Le contraste maximum est la juxtaposition de deux complémentaires entre elles.
Calibrage des couleurs et profondeur chromatique
RVB (rouge, vert, bleu) est l'espace chromatique créé pour les infographies destinées à être vues sur écran.
La perception des couleurs diffère d'un écran à l'autre en fonction :
- De la plate-forme utilisée par le visiteur : Mac ou PC.
Les couleurs paraissent plus pâles sur Mac.
Ce problème est du aux différences de gamma dont les réglages gèrent la luminosité et le contraste de l'affichage d'un moniteur. - Du réglage du moniteur. On ignore la façon dont l'utilisateur a paramétré les couleurs, la luminosité et le contraste de son écran.
- De la profondeur chromatique ou profondeur de bit : elle peut désigner le nombre de couleurs d'une image ou le nombre de couleurs qu'un ordinateur est capable d'afficher.
Aujourd'hui, la grande majorité des ordinateurs est équipée de cartes vidéo 32 bits capables d'afficher plus de 16,7 millions de couleurs.
32 bits |
+ de 16,7 millions de couleurs |
|---|---|
24 bits |
+ de 16,7 millions de couleurs |
16 bits |
65 500 couleurs |
8 bits |
256 couleurs |
4 bits |
16 couleurs |
2 bits |
4 couleurs |
Systèmes colorimétriques
La colorimétrie a pour rôle de mesurer et de chiffrer les couleurs.
Pour être définie physiquement, une couleur fait appel à 3 paramètres (luminosité, saturation, teinte) ; cela correspond mathématiquement à la définition d'un espace à 3 dimensions appelé "espace colorimétrique" qui différe selon le référentiel choisi.
La fenêtre gérant les couleurs dans Photoshop permet de visualiser une couleur sous différents référentiels, sous différents systèmes colorimétriques.
Le système RVB
 |
Le système RVB ("Rouge Vert Bleu", RGB en anglais) s'appuie sur la synthèse additive. La couleur d'un pixel est composé de 3 couleurs de lumière projetées qui se mélangent d'un point de vue optique. Les couleurs RVB sont dites additives car leur mélange crée du blanc. Cet espace chromatique a été créé pour des infographies destinées à être vues uniquement sur écran. Ces couleurs sont souvent d'une intensité et d'un contraste plus forts que les couleurs sur papier. |
|---|
Le système TLS
Le système TLS ("Teinte Luminosité Saturation", HSB en anglais) est une alternative au système RVB.
Il a été conçu pour faciliter le choix de couleurs.
Au lieu de donner les 3 composantes rouge vert bleu, l'utilisateur choisi une teinte, une luminosité et une saturation. En agissant ainsi, on est proche de ce qu'on fait avec des tubes de peinture : choix d'une couleur principale, ajout de noir ou de blanc, ajout de touches de couleurs différentes.
Le système hexadécimal
Le langage HTML utilise des valeurs hexadécimales pour exprimer les couleurs fondamentales du système RVB.
Les couleurs sont codées sur 3 octets et notées en hexadécimal sous la forme : RRGGBB.
Ces valeurs sont des nombres à 6 "chiffres" utilisant les chiffres de 0 à 9 et les lettres de A à F. Ils sont précédés du signe #.
- RR = valeur hexadécimale de l'octet codant la primaire rouge
- GG = valeur hexadécimale de l'octet codant la primaire verte
- BB = valeur hexadécimale de l'octet codant la primaire bleue
Exemple: COLOR=#BA064A
RR=#BA (rouge)
GG=#06 (vert)
BB=#4A (bleu)
Dans le cas ci-dessous, on a limité notre choix aux couleurs Web dans Photoshop.
Au début du Web, on se limitait à 256 couleurs (216 couleurs Web sécurisées + 40 couleurs System supplémentaires ajoutées par le navigateur et dépendant de la plate-forme) qui pouvaient être représentées sur n'importe quel écran et n'importe quel système. Les couleurs Web sont celles composées de trois paires de chiffres identiques. Ainsi, #CC0033 est une couleur Web, alors que #BA064A n'en est pas une.
Pour être interprétées par un navigateur, les couleurs peuvent être libellées de 3 façons :
- en hexadécimal (ex : #CC0033 ou #C03), technique conseillée
- en RVB classique (ex : 204,0,51)
- par un nom "reconnu" par le langage HTML (ex : red)