Le codage des couleurs dans les images. [TUTO]

Comment les couleurs sont-elles codées dans les fichiers images bmp ? Qu’est-ce que le code hexadécimal ? Qu’est-ce que le code de couleurs RVB ?

C’est à ces questions que nous allons tenter de répondre dans cet article.

synthèse aditive des couleurs

1- L’affichage des couleurs sur l’écran.

Avant de répondre aux questions précédentes, il faut d’abord comprendre comment les couleurs sont retranscrites sur un écran d’ordinateur ou de télévision.

Les écrans d’ordinateur utilisent le principe de la synthèse additive des couleurs. La superposition de la lumière émise par trois pixels colorés, un rouge R, un vert V et un bleu B, donne dans l’oeil une couleur perçue. Un pixel est un point lumineux de l’écran. Un point de couleur est donc formé de trois points de couleurs rouge, vert et bleu (RVB).

Selon les pixels allumés, on obtient les couleurs suivantes :

rouge + vert + bleu = blanc

rouge + vert = jaune

rouge + bleu = magenta

vert + bleu = cyan

C’est ce qui est représenté sur l’image ci-dessus.

Et les autres couleurs me direz-vous ?

Eh bien, c’est très simple. Selon l’intensité de la lumière émise par les trois pixels de couleurs RVB, on obtient toutes les couleurs de l’arc-en-ciel.

2- Le codage hexadécimal des couleurs en informatique.

Dans un ordinateur, l’intensité d’un pixel peut prendre une valeur entre 0 et 255 (256 possibilités), ce qui correspond à un octet (8 chiffres valant 0 ou 1)

Comme il y a trois pixels RVB (ou RGB), cela fait 256x256x256 = 16 millions de possibilités environs. C’est pourquoi on parle de 16 millions de couleurs.

On pourrait coder une couleur par trois chiffres décimaux par exemples 255 255 255 pour le blanc. Mais ce n’est pas pratique. On préfère utiliser la notation hexadécimale (en base 16), qui raccourcit l’écriture et se prête bien à la transformation binaire-hexadécimal et inversement.

Comme notre écriture ne comporte que 9 chiffres (0,1….9), on complète pour aller à 16 par des lettres allant de A jusqu’à F (0,1 …. 9, A, B,…,F)

Ainsi l’exemple du blanc précédent donne FF FF FF.

Pour une couleur donnée, chaque pixels RVB prendra en hexadécimal, une valeur particulière allant de 0 à FF.

Pour indiquer à l’ordinateur que le nombre est écrit en hexadécimal, on place un « # » devant le nombre. Cette notation est utilisée dans plusieurs langages de programmation et pour les CSS et HTML

3- La palette de couleur.

Pour choisir une couleur et trouver son code hexadécimal, on utilise souvent une palette de couleur.

Pour avoir une palette de couleur, on peut utiliser un logiciel de dessin gratuit tant qu’à faire, comme paint.net ou photofiltre, ou utiliser une palette de couleur en ligne. Ces palette en ligne permettent d’harmoniser les couleurs entre elles, ce qui est intéressant.

 

4- Les fichiers images RVB matriciels

Dans un fichier de type bitmap, bmp, chaque point est codé par la valeur des trois pixels RVB. Les autres formats matriciels sont des compressions de ce type de représentation, avec quelques informations supplémentaires comme la transparence pour les png etc.

Pour compresser une des algorithmes plus ou moins complexes qui réduisent la taille des images mais souvent altèrent leur qualité. Par exemple, on ne code pas plusieurs fois des points consécutifs de même couleur, (format pcx). Quant au dessin vectoriel c’est différent.

 

Voilà, j’espère que ce petit tuto n’était pas trop rébarbatif. N’hésitez à préciser ou corriger certains point, si je me suis égaré. 🙂

Les recherches qui vous ont mené ici

  • couleur dans les images (1)
Ces articles pourraient vous intéresser :
2 Comments

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lire plus :
miniature thème mobile http;//outils-web.fr
4 Plugins pour créer une version mobile d’un blog WordPress

Le nombre de visiteurs provenant de smartphones ou de tablettes est de plus en plus grand. Si vous visualisez votre...

Temple Run
Temple Run : le meilleur jeu d’adresse android du moment.

Si vous aimez les courses effrénées pour sauver votre peau dans un décor de temple 3D. Si vous aimez battre...

retroweb du mois
La rétro du web #12

La rétro du Web c'est le top des articles, les meilleures découvertes, les surprises des dernières semaines. Allez jeter un...

Fermer