La couleur à l'écran, vaste programme.

1. Comment jaillit la couleur de votre écran, et pourquoi les graphistes PAO ont-ils tant de mal à comprendre la couleur pour le multimédia ?

2. Quelle est la signification des <COLOR="#BBCCØØ"> sorties tout droit du code source des pages Web ?

3. Ce codage Hexadécimal des couleurs, en a-t-il encore pour longtemps ?

4. Faut-il respecter les 216 couleurs Web "sécurisées" que nous proposent Photoshop ou Dreamweaver ?

5. Et puisque qu'on est interactif, faut-il changer la couleurs des liens ?

1. Couleur et écran

La synthèse additive des couleurs ou le "Lux fuit" de l'écran.

Au commencement, était le noir, l'obscurité, l'écran vide et éteint.
Les écrans, moniteurs et téléviseurs, produisent les points lumineux à partir de trois minuscules points rouge, vert et bleu appelés luminophores.

C'est l'assemblage de ces trois couleurs qui permet de créer toute la gamme des couleurs à l'écran. Ce système est appelé synthèse additive, car c'est en ajoutant les trois couleurs, en augmentant l'intensité lumineuse, que l'on obtient les couleurs, jusqu'au blanc.

Pour nos amis photographes disposant d'un studio, l'expérience est reproductible dans le monde réel en croisant les faisceaux de 3 projecteurs rouge, vert, et bleu.

Pour ceux disposant de Photoshop, il suffit de superposer 3 cercles sur 3 calques différents en mode superposition, sur un fond noir. Chaque cercle est rouge, vert, bleu pur (en RGB : à fond à 255 sur l'une des valeur, 0 sur les autres).

Les créateurs d'images de synthèse peuvent également simuler, voire utiliser le phénomène, en utilisant 3 projecteurs rouge, vert et bleu pur, et en jouant sur les décalages. Ils auront la surprise de créer dans le faisceaux des lumières une lumière blanche et de produire des effets inédits dans les zones communes. Les ombres, produisant les couleurs complémentaires sont également intéressantes.

Cliquez pour aggrandir

Mais cyan-ce le jaune que je magenta-là ?

Hé oui ! On retrouve, comme à l'intersection du rouge et du bleu, du bleu et du vert, du vert et du rouge, les couleurs primaires du système inverse, celui utilisé dans l'imprimerie.

Ce système dit, soustractif, fonctionne en effet sur le modèle inverse. On part du papier blanc, déjà saturé de lumière, en fait. Les encres retirent donc de la couleur originelle du papier. Et si j'ajoute du cyan, magenta et jaune en égale proportion, j'obtient du noir. Seulement, il est plus facile d'imprimer directement du noir pur, d'où l'encre noir du système CMJN des PAOistes.

Il existe en résulte 5 systèmes colorimétrique pour des utilisations variées :

Rouge Vert Bleu (ou RVB soit Red Green Blue en anglais) : Synthèse additive - Télévision - Ecrans à tube - HTML - Infographie
Commission Internationale de l'énergie LAB : Synthèse additive. On retrouve ce système sous Photoshop. Il est très utile pour travailler sur le contraste sans altérer les couleurs.
Cyan Magenta Jaune Noir (CMJN ou CMYK) : Synthèse soustractive - Imprimerie offset - Imprimantes
Teinte Saturation Luminosité (HSL ou HSV) : Synthèse additive
YCrCb ou YUV : Synthèse additive : Photographie- Télévision et vidéo.

A noter, que nos amis graphistes PAO ont toujours du mal à raisonner autrement qu'en CMJN, et à comprendre qu'en matière de multimédia (CDrom ou web), le RVB est roi.

De plus, dans nos métier, il déconseillé de calibrer ses écrans. Ceux du public ne l'étant pas.

Conseil : amis du print qui passez au web, pensez RVB !!!

Et si tout n'est pas clair, un petit tour sur :
http://www.infres.enst.fr/~vercken/couleurs/contraste.html
http://www.ciger.be/crayon/couleur/index.html

-----------------

2. Codage de couleur Web : théorie.

En matières de pages Web, beaucoup d'éléments peuvent changer de couleur selon la volonté du webdesigner. Tableaux, polices, couleurs des liens…

Soit dans le code source : COLOR, BGCOLOR, TEXT, VLINK… autant d'attributs des balises FONT (ou HR), TABLE et BODY qui peuvent prendre comme paramètres un codage aussi mystérieux qu'ésotérique, comme par exemple : ="#FF00BB".

Comment lire ce code sibyllin ?

Le paramètre se doit d'être entre guillemets comme tout paramètre autre que des chiffres (ex: WIDTH=100 est correct) à cause du symbole dièse (#).
Ce symbole fait partie de la syntaxe, il exprime ici les valeurs en hexadécimal.

Reste donc 6 chiffres, à décomposer en 3 paires, chacune étant une valeur du Rouge, Vert et Bleu dans le système de couleur RVB des écrans (voir 1).

FF, 00, BB

Sur un affichage d'ordinateur, chaque composante RVB est codée entre 0 et 255. On échantillonne sur 8 bits : 2 puissance 8, c'est bien 256. De 0 à 255, il y bien 256 valeurs possibles (le 0 compte en informatique). C'est ce que vous voyez si vous choisissez vos couleurs en mode RVB sous Photoshop ou un autre logiciel.

En HTML 3.2, on compte la couleur en hexadécimal. Les humains comptent sur leurs doigts, ils ont dix doigts, on compte donc système en décimal. 10 chiffres, de 0 à 9.
Imaginez un mutant (un informaticien ?) à 16 doigts qui compte de 0 jusqu'à 15 :
0,1,2,3,4,5,6,7,8,9,A, B, C, D, E, F.

Le principe de conversion entre une couleur RVB classique dans votre logiciel de dessin et ce fichu code hexadécimal d'informaticien est donc :

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

Exemples :

#80 16 x (8) + 1 x (0) = 128
#FA 16 x (15) + 1 x (10) = 250.

Un excellent site sur ce sujet pour finir :

http://www.ciger.be/crayon/net/index.html

-----------------------------------------

Les spécifications du HTML 4.0, et de leur pendant pour la mise en page évoluée du document, les CSS, les fameuses feuilles de style en cascades, permettront enfin d'indiquer les couleurs de manière simple :

Les couleurs s'expriment encore en mode RGB. Les trois écritures seront utilisées :
· #rrggbb en hexadécimal, exemple : #00CCFF ou même #0CF
· rgb(a,b,c) a, b, c représentent des valeurs entières ente 0 et 255, exemple rgb(0,204,255)
· rgb(%a,%b,%c) a, b, c représentent des valeurs entières ente 0 et 100, exemple rgb(0%,80%,100%)

En outre, certaines couleurs sont déjà définies par 16 mot-clés issus de la palette Windows VGA :
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

Avertissement
Internet Explorer 4 et 5 sont les mieux adaptés à l'implémentation de Dynamic HTML ou HTML 4. Netscape 4, comme d'habitude est à la traîne. En fait, la compatibilité de Netscape 4 avec DHTML n'est pas garantie... C'est la version 6 de Netscape qui procure enfin une bonne compatibilité avec notamment les feuilles de style....
--> voir à ce propos la liste des bugs par navigateur, http://css.nu/pointers/bugs.html, "CSS Bugs and Workarounds".

Pour la syntaxe, voir la bible, le site du Worlwideweb consortium:
http://www.w3c.org

-----------------------------------------

4. Codage de couleur web : pratique !

Heureusement, si vous ne comprenez rien à l'hexadécimal, les logiciels modernes codent les couleurs Web pour vous.
De toute façon bientôt, il n'y en aura plus besoin, cf les css !

Depuis la version 5.5, Photoshop dispose dans son sélecteur de couleur, d'un champ où les couleurs sont en Hexa. Il suffit donc de recopier cette valeur. Fireworks vous permet la même chose, avec en plus une pipette qui convertit automatiquement n'importe quel pixels pris dans l'écran (même en dehors de l'application).

Plus direct, la palette de couleur de logiciels comme Flash, Fireworks ou Dreamweaver, codent pour vous la couleur en hexa.

A noter que les contraintes du type :

- sous Photoshop : couleur web seulement
- sous Dreamweaver, s'en tenir aux couleurs du premier sélecteur seulement (cliquez plutôt sur l'icône en forme de palette en bas à droite).
- et en général, ce qu'on appelait les couleurs "web safe", soient 216 couleurs qui était reconnaissables à leur codage par paire de chiffres identiques pour chaque valeur (ex: #FF00BB ou #22CC66)

sont désuètes et inutiles.
Elles correspondaient en effet aux 216 couleurs Web disponibles quand l'affichage des ordinateurs était limité à 256 couleurs au total (8 bits).

Parmi ces 256 couleurs disponibles, 40 était réservées par le système d'exploitation et le logiciel de navigation (ex: Netscape). D'où la contrainte des 216 couleurs. Si on utilisait une autre couleur que ces 216, on risquait de la voir tramer par l'affichage. Le résultat était à la fois imprévisible et très moche. Comme les résolutions d'écran était faibles (640 pixel par 480, le plus souvent), on discernait les pixels et que le mélange optique se voyait.

De nos jours, tout le monde peut au moins afficher 65536 (16 bits) couleurs ou même 16 millions (24 bits). Plus besoin de se priver de toute la gamme des couleurs !!!

Sauf si vous développez un site web à destination de palm et autres PDA à l'affichage limité.

Décidément, dès qu'une technologie s'améliore, il faut qu'une autre surgisse pour remettre au goût du jour des contraintes qu'on croyait pouvoir oublier !

Stéphane ANQUETIL - freelance2hire.com
voir mon profil
réagir à cet article