|
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 |
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
|