2. CODAGEDE LA COULEUR...

Types de couleurs - Symbolique des couleurs - Lisibilité - Graphisme
-Typographie - Diffuser sur le web-


  La couleur est un phénomène comportant deux éléments complémentaires:
les couleurs primaires de la lumière et les couleurs primaires de pigmentation 
(de la matière). La combinaison de toutes les couleurs de la lumière donne la lumière blanche (synthèse additive en photo), celle de pigmentation donne la couleur noire (synthèse soustractive en photo). 

Les artistes disent: «jaune, rouge et bleu»,
les scientifiques répondent «vert, rouge et bleu».
Qui a raison ?

TYPES de couleurs 
Chaque type comprend un groupe de trois couleurs primaires:

• le rouge, le vert et le bleu pour la lumière : Red Green Blue en télévision ou sur écran lumineux. 

• le bleu , le rouge et le jaune pour la matière (couleurs primaires en arts plastiques).

En peinture, le mélange des pigments aboutit à une synthèse par soustraction des couleurs.
Mais au début du xxe siècle, les peintres impressionistes travaillèrent suivant le principe de la synthèse additive (le peintre pointilliste Seurat ).
En photographie, il existe deux méthodes pour obtenir des couleurs, par addition ( trois faisceaux de lumière, rouge, verte et le bleue) ou par soustraction (trois filtres de pigments: jaune, magenta et cyan).

Extrait de: Le photojournalisme, informer en écrivant des photos, sous la direction de Paul Almasy, Paris: CFPJ 1990.
 

Synthèse additive                      Synthèse soustractive




La couleur a souvent une fonction analogique par rapport aux objets de la réalité qu'elle veut représenter, mais elle peut aussi s'éloigner de la réalité pour des raisons esthétique
(harmonie des couleurs chez Renoir et Matisse) ou de recherche symbolique s'appuyant sur des pratiques sociales et culturelles pouvant varier d'un pays à l'autre.
 

Symbolique des couleurs

  • bleu (mer, ciel) = calme, paix,  légèreté...
  • rouge (feu)= chaleur, dynamisme, passion , danger...
  • jaune (soleil) = gaieté, puissance , attention...
  • vert (nature) =  fraîcheur, calme, sans danger...
  • blanc (lumière) = pureté, sobriété, deuil...
  • noir (absence de couleurs) = deuil, tristesse, anonymat...


Sur le plan pratique: une couleur sera d'autant mieux perçue qu'elle ne sera pas sur un fond blanc.
Donc , pour mettre en relief le sujet principal (clair), choisir un fond ou un décor plus foncé comme c'est souvent le cas des pages d'accueil de sites transactionnels (publicitaires). Enfin, une couleur paraît plus sombre sur un fond clair.
 

En graphisme

ne pas multiplier les couleurs , quatre sont suffisantes : vert, rouge, bleu et noir ;
• se donner un code : le rouge renverra toujours au même type d'information...

ATTENTION
le rouge à l'écran a tendance à s'étaler,  s'il occupe trop d'espace-écran

Donc, lorsque vient le moment de choisir une couleur, un critère importe plus que le goût personnel
c'est celui de la visibilité/ lisibilité. Deux facteurs sont retenus pour évaluer la qualité relative de
combinaison de couleurs pour des objets iconiques:  la distance minimale et la vitesse de lecture .
Les expériences de Derek Keeling ont montré que les contrastes suivants (tableau ci-bas) assurent
une plus grande lisibilité DE LOIN aux objets visuels, du moins sur une surface non lumineuse comme les affiches.
 

Principes de lisibilité des objets graphiques

TABLEAU décroissant SUR LA LISIBILITÉ DES  OBJETS PERÇUES  À  UNE CERTAINE DISTANCE
SELON LA COULEUR de la lettre (objet) qui fait FIGURE sur celle  DU FOND.


LETTRES                          sur FOND

noires                                    jaune 
vertes                                        blanc
bleues                                        blanc
blanches                                bleu
noires                                        blanc
jaunes                                        noir
blanches                                        rouge
blanches                                           orange
blanches                                            noir
rouges                                                jaune
vertes                                                rouge
rouges                                              vert
bleues                                              rouge

En typographie

Lettres noires sur fond blanc pour un texte à caractère informatif: moins de fatigue visuelle.
Mais pour accrocher, un titre, un mot clé, un générique de film ou à la télévision,
on choisira des lettres blanches sur fond noir pour un meilleur contraste et une prégnance
des images-mots ainsi créées. En général, une lettre foncée sur un fond clair est lisible
de plus loin que l'inverse.

Voici les couples en typographie (lettres sur fond de couleur) dégagés par les spécialistes
Peterson et Tinker:

noir/blanc (norme de comparaison)
vert/blanc
bleu/blanc
noir/jaune
rouge/jaune
rouge/blanc
vert/rouge...

On remarque ici que la principale différence pour une lisibilité élevée entre objet typographique et
objet graphique  se situe au début entre objet noir sur fond jaune ou objet noir sur fond blanc .

Consulter:
Comment  faire des images qui parlent, sous la direction de Claude Cossette, Montréal: Éd. Transcontinental, 1997.
 

Diffuser sur le web indépendamment des navigateurs

Réduction à 216 couleurs

La solution pour éviter le changement de couleurs dans nos pages Web, selon le navigateur utilisé, est de passer par une palette de couleurs unique, indépendante du navigateur.

La gamme de couleurs disponibles est celle du RGB (rouge, vert, bleu). Pour les inscrire comme paramètres d'un attribut HTML, il faut toutefois convertir les valeurs RGB en valeurs hexadécimales. Consultez le site webmonkey avec ses hex codes de couleurs : http://hotwired.lycos.com/webmonkey/reference/color_codes/

Ces valeurs se situent entre 0 et 255 couleurs . Si elles sont toutes 255, la couleur est blanche. Si elles sont toutes 0, la couleur est noire. Rouge est 255 0 0, Vert est 0 255 0, Bleu est 0 0 255. Pour voir les valeurs de plusieurs couleurs communes, allez à :http://www.crecon.com/colorchart.html .

Pour trouver les valeurs hexadécimales correspondant à une couleur donnée, plusieurs manières de procéder sont envisageables :

* Si l'on utilise Adobe Photoshop, on peut connaître les valeurs R, G et B des couleurs choisies en utilisant le nuancier (color picker). Ensuite, pour les transformer en hexadécimales, il faut avoir recours à une table de conversion. Converties en hexadécimal, ces valeurs correspondent à #00, #33. #66, #99, #CC et #FF.  La nouvelle palette de couleurs se compose de 216 combinaisons possibles.

Simplifiez-vous la vie

Allez consultez le site de Chromoweb où un tableau de couleurs et leur valeurs RVB (RGB) sont exprimées en hexadécimale (code utilisé en HTML) .
 

Ces couleurs nommées correspondent aux 16 couleurs standards de la palette du système VGA de Windows.
Pour en savoir davantage, référez-vous à l'ouvrage : Graphisme des sites Web en couleur, 1re édition 2000,  par Florian Schäffer, chez Micro Application, Paris (chapitre 6) ou consultez le site suivant: http://interface.free.fr/Graphisme/graphisme.html


retour à la page d'accueil

1. Composition  3. Graphisme 4. Codage du texte