Les feuilles de style avec KompoZer

< 1 2 3 4 5 6 7 8 [ 9 ] 10 11 12 13 14 15 >
Index du cours Plan de la leçon Objectifs @#~!%£!! Recherche

Codage des couleurs

Petite vérification du travail

Vérifie que la page test.html est toujours active. Si nécessaire, ouvre-la.
Clique sur le bouton de la barre d'outils de KompoZer.
Clique sur le sélecteur h1 dans la zone Feuilles et règles.
Clique sur l'onglet Texte.
Vérifie la mention indiquée dans la zone Couleur.

Ouuups, il est devenu fou, votre éditeur CasCadeS ? Voilà qu'il me met des trucs bizarres là où j'avais simplement indiqué que je voulais un joli orange. C'est quoi ce #ff6600 comme sur l'illustration, par exemple ?

Pas de panique : tout est sous contrôle. La notation " bizarre " correspond en réalité à un code pour la couleur sélectionnée.

Nous savons que l'ordinateur code les couleurs sous forme numérique car il ne peut " retenir " que des informations numériques. Plus de 16 millions de couleurs différentes sont possibles ; on indiquera donc, dans la zone Couleur, un nombre compris entre 0 et 16777216.

Oh ! Là, je vois que vous vous moquez. Ce qui n'est pas très charitable. La lettre " f " n'a jamais fait partie des chiffres, que je sache. Et vous voulez me faire croire que " ff6600 " est un nombre ?

Je ne me permettrais pas ! En réalité, le nombre en question est écrit dans un système un peu différent du système décimal.

Les couleurs dans le système RGB

En informatique, on utilise souvent le système RGB pour coder les couleurs qui doivent apparaître à l'écran.

RGB est l'abréviation de Red Green Blue (on dit aussi RVB en français). Chaque point de couleur à l'écran est formé de l'addition de trois couleurs fondamentales: une lumière rouge, une lumière verte et une lumière bleue.

Les quantités de chaque lumière varient entre la valeur 0 et la valeur 255.

Un point de couleur RGB (255,0,0) est donc totalement rouge.
Un point de couleur RGB (255,255,0) est donc formé d'un mélange de lumière rouge et de lumière verte; mais pas de bleu. Il s'agit de la couleur jaune.

Pop, pop, pop... Quand je mélange de la peinture rouge et de la peinture verte, ça ne donne pas du jaune!! Vous racontez n'importe quoi.

Pas du tout. Vous semblez oublier que nous mélangeons des lumières, pas des peintures. Le principe est tout à fait différent. Nous parlons bien de synthèse additive.

Les couleurs en hexadécimal

Le système hexadécimal est souvent utilisé en informatique car il permet, à l'aide de deux signes seulement, d'indiquer le contenu d'une série de 8 bits, c.-à.-d. un byte (encore appelé "octet").

Le système hexadécimal compte 16 chiffres différents alors que le système décimal en compte 10 et le système binaire en compte 2.

Le tableau suivant indique la correspondance entre les 16 chiffres du système hexadécimal (première ligne) et leur représentation en décimal (deuxième ligne).

hexadécimal	0	1	2	3	4	5	6	7	8	9	a	b	c	d	e	f
décimal	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15

Exemples:

En décimal, le nombre 66, par exemple, représente 6 dizaines et 6 unités.
En hexadécimal, le même nombre représente 6 "seizaines" et 6 unités = 6*16 + 6 = 96 + 6 = 102 (décimal).

Le nombre c2 (hexadécimal), par exemple, représente 12 "seizaines" et 2 unités = 12*16 + 2 = 192 + 2 = 194 (décimal).
Le nombre c2 n'existe pas en décimal car le chiffre "c" n'existe pas.

Le nombre ff (hexadécimal) représente 15 "seizaines" et 15 unités = 15*16 + 15 = 240 + 15 = 255 (décimal).
Le nombre ff n'existe pas en décimal car le chiffre "f" n'existe pas.

Conclusion: une couleur est représentée par 3 nombres compris entre 0 et 255, représentés en hexadécimal. ff6600 est donc bien un grand nombre écrit en hexadécimal. Le signe # rappelle qu'il s'agit d'une notation hexadécimale.

La calculatrice intégrée au système d'exploitation permet généralement de calculer en décimal ou en hexadécimal.

Passe la calculatrice en mode "hexadécimal" (généralement en sélectionnant une option).
Ecris le nombre FF6600 au clavier.
Passe alors la calculatrice en mode décimal.

Le nombre décimal correspondant apparaît à l'affichage.

#FF6600 = 255 (#FF) * 256 *256 + 102 (#66) * 256 + 0 = 16737792.
C'est un mélange constitué d'un maximum de rouge pur (#FF), d'une certaine quantité de vert (#66) mais pas de bleu (#00). C'est la couleur de fond de cette phrase.

Tout ceci étant un peu complexe, nous laisserons l'explication uniquement pour les curieux que cela intéresse. Clique ICI pour voir l'explication (ou pour la faire disparaître).

Partie réservée à celles et ceux qui sont intéressés

Chaque couleur est formée d'un mélange de trois couleurs fondamentales : le Rouge, le Vert et le Bleu.

En mélangeant une certaine quantité de chacune de ces trois couleurs, on peut obtenir toutes les couleurs possibles.

La quantité de chacune des couleurs fondamentales mélangées est indiquée par un nombre compris entre 0 et 255 (le plus grand nombre que l'on puisse faire tenir dans un octet).
On dispose donc de 256 nuances (entre 0 et 255) possibles de Rouge, 256 nuances de Vert et 256 nuances de Bleu.

Dans le système RVB, on code les couleurs comme dans le tableau ci-dessous.

Couleur	R	V	B
Bleu pur	0	0	255
Rouge pur	255	0	0
Jaune pur	255	255	0
Blanc	255	255	255
Noir	0	0	0

En notation RVB, on code donc le jaune pur: RVB (255,255,0).

OK, mais ça ne nous dit toujours pas l'origine des lettres qui apparaissent dans les codes des couleurs.

J'y viens. Les lettres proviennent d'un système de numération utilisé par l'ordinateur qui préfère le système hexadécimal au système décimal que nous utilisons.

Un octet est formé de 2 x 4 bits.

	4 bits				4 bits
	1	0	0	1	1	1	1	1
Décimal	9				15
Hexa	9				F

Dans un ensemble de 4 bits, on peut coder un nombre compris entre 0 et 15. Il est donc pratique de travailler dans un système de numération comptant 16 chiffres (entre 0 et 15) ; c'est le système hexadécimal qui comporte les chiffres 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E et F.

1	0	1	1	1	1	1	1	0	1	0	1	1	1	0	0	1	0	0	1	1	1	0	1
6				F				5				C				9				D
191								92								235
Couleur correspondante : #6F5C9D Couleur de fond de cette cellule

Une couleur codée sur 3 octets (c.-à-d. 24 bits) est donc représentée à l'aide de 6 signes, en hexadécimal. C'est ce que montre le tableau ci-contre.

Un outil assez complet pour comprendre le codage à l'aide de trois couleurs fondamentales peut être trouvé sur le site web http://www.alaide.com.

Quand tu es convaincu(e) que les nombres hexadécimaux représentent bien des codes pour les couleurs, passe à la page suivante.

Dernière modification 23/02/2008

Cette création est mise à disposition sous un contrat Creative Commons.