Codage des couleurs

TP n°12 : Le codage informatique des couleurs : l'héxadécimal

Objectif : Comprendre la numération en hexadécimal puis le codage informatique des couleurs.

I. La numération hexadécimale

La numération hexadécimale utilise 16 chiffres:

La numération hexadécimale compte 16 chiffres, c'est donc une base 16.

Le chiffre "A" hexadécimal correspond au chiffre "10" en décimal. Pour distinguer un nombre hexadécimale d'un nombre décimal, on le précède du signe $ (ex : $1A et $22 sont deux nombres hexadécimaux)

1) Donner, sous forme de tableau, l'équivalent décimale des chiffres hexadécimaux compris entre $0 et $14.

Pour trouver l'équivalent décimal du nombre $53A, il faut l'écrire sous la forme d'une somme de puissance de 16 :

Le chiffre 5 est sur le rang 2, il équivaut à 5.16²

Le chiffre 3 est sur le rang 1, il équivaut à 3.16¹

Le chiffre A est sur le rang 0, il équivaut à 10.16⁰

Au total, on a donc $53A qui vaut 5.16²+3.16¹+10.16⁰ =1280+48+10=1338

2) Traduire en nombre décimal chacun des nombres hexadécimaux $111 ; $2A ; $B8 C ; $5F0A

3) En utilisant la démarche inverse, traduire en nombre hexadécimal chacun des nombres décimaux 181 et 267.

4) Vérifier vos résultas en utilisant la calculatrice de Windows

L'ordinateur stocke des informations dans des lieux qui s'appellent des cases mémoires. Chaque case mémoire possède une adresse qui est codé en hexadécimale (comme un code postal quand on envoie une lettre).

Exemples d'adresse : $B8AC et $000F

II. Principe du codage des couleurs

Chaque couleur est obtenue à partir de trois couleurs de base: le rouge, le vert et le bleu.

1) Approcher votre oeil de l'écran sur la cellule blanche ci-dessous. Qu'observez-vous ?

L'observation précédente grossie à la loupe montre que le pixel est constitué des 3 couleurs de base et on a la forme suivante pour un pixel :

Chacune des trois couleurs a une luminosité plus ou moins forte qui est déterminée par la valeur d'un octet. Cette valeur de luminosité peut donc aller de : 0000 0000 à 1111 1111.

2) Combien de niveaux de luminosité sont possibles pour chaque couleur (rouge, vert ou bleu)?

Pour coder la couleur d'un pixel, il faut donc utiliser 3 octets qui définissent chacun la luminosité des couleurs rouge, verte et bleue. Trois octets sont bien longs à écrire : on préfère utiliser un nombre hexadécimal .

Pour coder la couleur d'un pixel, on utilise un nombre hexadécimal à 6 chiffres : les 2 premiers correspondent à la luminosité du rouge, les 2 suivants à celui du vert et 2 derniers au bleu (ex : avec une intensité maximale sur le rouge on a $FF0000)

3) Donner les nombres hexadécimaux correspond aux couleurs bleu puis verte (avec une intensité maximale sur chaque)

4) Quelles sont les valeurs hexadécimales des couleurs noire, blanche puis d'un rouge clair ?

5) Quelle est la couleur qui domine pour le pixel codé par le nombre hexadécimal ci-dessus ($F588A7) ?

6) Remplacer les demi-octets ci-dessous par leurs équivalents hexadécimaux sur la ligne inférieure.

1 0 0 1	1 0 1 0	1 1 0 1	1 1 1 1

7) Calculer la valeur décimale de l'octet 1001 1010 puis 1101 1111. Donner ensuite la valeur hexadécimale de chacun.

8) Conclure : proposer un méthode rapide pour coder un octet en son équivalent hexadécimale.

III. Utilisation d'un logiciel éditeur HTML

Lancer le logiciel Frontpage express (il se situe dans le dossier MPI du bureau).
Utiliser le menu:
Fichier Nouveau Page normale
Puis Affichage HTML

On observe alors le code HTML de la page vide.
Le contenu de la page est codé entre les balises
<body et </body>.
On y remarque seulement: bgcolor="#FFFFFF",
ce qui signifie (background color) couleur de fond.

1) Quelle est cette couleur? Justifier.

2) Modifier le code de la couleur pour que le fond soit successivement noir, rouge, vert et enfin bleu. Rassembler les résultats dans un tableau.

<html>

<head>

content="text/html; charset=iso-8859-1">

<title>Page normale sans titre</title>

</head>

</body>

</html>

3) Essayer toutes les couleurs de fond où deux codes sont à leur valeur maximale. Nommer ces couleurs et placer les codes correspondants dans le tableau.

4) Enfin, essayer des codes identiques pour les trois couleurs de base. Faire une conclusion.

5) Que faire pour avoir par exemple un rose très pâle? (Tenter de trouver un code de manière raisonnée)

2) En informatique, une image peut se définir à l'aide de16, 256 ou 16 millions de couleurs. Dans quel cas sommes nous?

Reprendre l'éditeur Frontpage express pour créer un tableau qui fera correspondre une couleur à son code hexadécimal et à son nom.

Pour créer un tableau, dans le menu, choisir:
Tableau Insérer un tableau
Configurer comme ci-contre pour avoir 3 lignes et 10 colonnes, avec une bordure de 1 pixel, le tableau occupant 100% de la largeur de la page.
Pour observer le code HTML de la page:
Affichage HTML
Bien observer ce code, sachant que:
Les deux balises <table> et </table> créent le tableau;
une ligne est créée entre <tr> et </tr>;
une cellule est créée entre <td> et </td>.
Quitter le mode d'affichage HTML et sélectionner la première cellule du tableau. Dans le menu, choisir:
Tableau Propriétés de la cellule
Dérouler le menu de la couleur d'arrière plan de cette cellule et choisir une couleur (rouge par exemple).
Observer la page, puis son code HTML.

Format de la cellule

1) Quelle est l'instruction qui a permis de déterminer la couleur de fond de la cellule?

2) Par un copier-coller, reproduire cette même instruction dans les 10 cellules de la première ligne. Puis changer les codes pour avoir toutes les couleurs dont les codes ont été vus au paragraphe II. (on pourrait évidemment continuer par la méthode utilisée pour la cellule 1).

Revenir à l'affichage normal de la page et remplir les deux autres lignes avec les codes HTML et les noms des couleurs.

3) Donner au fond de la page la couleur rose pâle trouvée au paragraphe II.

Notions sur le code des couleurs