Couleur et arrière -plan

 

Pas de jolies pages sans couleur, cette section est d'avantage pour les graphistes que les intégrateurs...

Cette section ne traite pas du choix des couleurs, (quoique nous pourrons l'évoquer) mais de leurs encodages...

 

Entrons dans le vif du Sujet

I Le nom des couleurs

CSS1 définit des noms clef des couleurs :

Syntaxe CSS

Les 16 couleurs standards, reconnues par tous les navigateurs (les autres ne sont pas forcément stabilisées)

Dénomination  Rendu attendu
(en arrière plan)
white Blanc
silver Argent (gris léger)
gray Gris (gris foncé)
black Noir
red Rouge
maroon Marron
lime Citron vert (vert clair)
green Vert
Dénomination  Rendu attendu
(en arrière plan)
yellow Jaune
olive Olive (jaune foncé)
aqua Bleu clair
blue Bleu
navy Marine (bleu foncé)
fuchsia Fuchsia (rose)
purple Violet
teal Bleu-vert

 

s'hérite CSS1 iemzchromeoperasafari
II L'encodage des couleurs

L'encodage des couleurs reposent sur notre perception physiologique et subjective des couleurs ( http://fr.wikipedia.org/wiki/Couleur )

En simplifiant nous pouvons estimer que notre oeil perçoit la couleur à l'aide de 3 types de récepteurs au fond de notre oeil:

  1. les batonnets percevant le Rouge, (cônes L, sensibles aux ondes longues (700 nm))
  2. les batonnets percevant le Vert, ( cônes M, sensibles aux ondes moyennes (546 nm))
  3. les batonnets percevant le Bleu, (cônes S, sensibles aux ondes courtes (436 nm))

Bref, nous sommes relativement aveugle car notre oeil ne traduit pas toutes les fréquences des ondes électro-magnétiques entre celles du rouge du vert et du bleu : c'est notre cerveau qui reconstruit les couleurs intermédiaires, orange, jaune, fushia, marron... voilà pourquoi la théorie des couleurs à partir des couleurs primaires est simple :voilà pourquoi nous pouvons reconstruire toutes les couleurs à partir des 3 Rouge, Vert, Bleu

Puisque notre cerveau reconstruit toutes les couleurs à partir des 3 fondamentales Rouge, Vert, Bleu : les systèmes électroniques feront de même Toutes les couleurs se noteront selon leurs 3 composantes le Rouge, le Vert et le Bleu (chez les anglo-saxonx système RGB)

cercle chromatique

Pour composer une couleur, les systèmes électroniques ont décomposé ce rouge en 256 nuances (de 0 à 255) (la théorie des couleurs parle de nuance quand une couleur s'éclaircit et d'ombre quand elle s'assombrit)

00 08 16 24 32 40 48 56 64 72 80 88 96 104 112 120 128
136 144 152 160 168 176 184 192 200 208 216 224 232 240 248 255

Comme le vert

00 08 16 24 32 40 48 56 64 72 80 88 96 104 112 120 128
136 144 152 160 168 176 184 192 200 208 216 224 232 240 248 255

Comme le bleu

00 08 16 24 32 40 48 56 64 72 80 88 96 104 112 120 128
136 144 152 160 168 176 184 192 200 208 216 224 232 240 248 255

 

Syntaxe CSS

On note la couleur à l'aide des 3 composantes fondamentales sur une échelle de 0 à 255

Par exemple

  
p#couleurEtFond {   
   background-color:rgb(255,148,148);
   color:rgb(51,153,51);
}

On peut aussi les traduire en nombre hexadecimal

p#couleurEtFond {   
   background-color:#FF9494;
   color:#339933;
}

Ecriture simplifiée en hexadécimal :

Lorsque les nombres sont redoublé chaque composante est alors définie de 0 à F simplement et la couleur est notée en raccourci sur 3 nombres hexadecimals

#6622BB équivaut à #62B


Règle CSS

La couleur complémentaire est celle que l'on trouve à l'opposé sur le cercle chromatique :

rgb(x,y,z) à pour complémentaire rgb(255-x,255-y,255-z) car leur somme donne la couleur blanche rgb(255,255,255)

Elles donnent un constraste à l'image et expriment énergie et vigueur

une couleur   sa complémentaire
rgb(255,y,z)   rgb(0,255,255)
rgb(0,255,0)   rgb(255,0,255)
rgb(0,0,255)   rgb(255,255,0)

On pourra s'interroger comment obtenir les couleurs adjacentes à une couleur primaire ? (voir testez-vous)

s'hérite CSS1 iemzchromeoperasafari
III Background-color

Exemple

La propriété background-color colore le fond de la boîte-conteneur jusqu'à sa bordure (voir le modèle de boîte) mais pas sa marge. Si la boîte est celle d'un bloc, la couleur est à l'arrière-plan du contenu et du padding.

s'hérite CSS1 iemzchromeoperasafari
IV Background-image

La propriété Background-image permet de placer une image en arrière plan à l'aide de ses auxiliaires background-position et background-repeat 

Exemple

background-color:#41CF92 ;
background-image:url(../exemples/couleur/portrait.png);
background-repeat:repeat-x;
background-position:center center;"

 

 

V Les couleurs sécurisées

Initialement, les ordinateurs antidéluviens ne pouvaient supporter que 256 couleurs, ces couleurs ont alors été sécurisées : un encodage produisant la même couleur sur l'ensemble des ordinateurs. (http://fr.wikipedia.org/wiki/Couleurs_du_Web#Couleurs_vraiment_garanties_pour_le_web)

*000* 300 600 900 C00 *F00*
*003* 303 603 903 C03 *F03*
006 306 606 906 C06 F06
009 309 609 909 C09 F09
00C 30C 60C 90C C0C F0C
*00F* 30F 60F 90F C0F *F0F*
030 330 630 930 C30 F30
033 333 633 933 C33 F33
036 336 636 936 C36 F36
039 339 639 939 C39 F39
03C 33C 63C 93C C3C F3C
03F 33F 63F 93F C3F F3F
060 360 660 960 C60 F60
063 363 663 963 C63 F63
066 366 666 966 C66 F66
069 369 669 969 C69 F69
06C 36C 66C 96C C6C F6C
06F 36F 66F 96F C6F F6F
090 390 690 990 C90 F90
093 393 693 993 C93 F93
096 396 696 996 C96 F96
099 399 699 999 C99 F99
09C 39C 69C 99C C9C F9C
09F 39F 69F 99F C9F F9F
0C0 3C0 6C0 9C0 CC0 FC0
0C3 3C3 6C3 9C3 CC3 FC3
0C6 3C6 6C6 9C6 CC6 FC6
0C9 3C9 6C9 9C9 CC9 FC9
0CC 3CC 6CC 9CC CCC FCC
0CF 3CF 6CF 9CF CCF FCF
*0F0* 3F0 *6F0* 9F0 CF0 *FF0*
0F3 *3F3* *6F3* 9F3 CF3 *FF3*
*0F6* *3F6* 6F6 9F6 *CF6* *FF6*
0F9 3F9 6F9 9F9 CF9 FF9
*0FC* *3FC* 6FC 9FC CFC FFC
*0FF* *3FF* *6FF* 9FF CFF *FFF*

David Lehn et Hadley Stern ont découvert que seules 22 des 216 couleurs de la palette sont fidèlement affichées sans remappage incohérent sur des moniteurs 16 bits. Ces 22 couleurs la palette vraiment garantie ("really safe" palette)  sont composées principalement de tons de vert et de jaune (couleurs soulignées ci-dessus).

Ressources

 

 

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Comment obtient-on les couleurs complémentaires ?

Comment obtient-on les couleurs adjacentes ?

Examinez le nuancier de Eric Meyer présenté sur la page

Comment sont calculés les nuances entre 2 couleurs ?