Comprendre le codage hexadécimal des couleurs

Coucou les enfants aujourd'hui comme j'ai vu draiike galérer à comprendre comment on faisait les couleurs etc... Je vous propose de vous expliquer tout ça.

Tout d'abord sachez que les couleurs se codent en hexadécimal.

---

Hexadécimal


L'hexadécimal c'est un système de numération assez utile pour les ordinateurs car c'est une contraction du langage binaire (lui aussi un système de numération => 0/1) qui peut donc être interprété aisément par l'ordinateur.

Dans la vie de tous les jours on utilise le décimal pour compter ( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9).
Pour les couleurs on utilise l'hexadécimal pour compter (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F)

Ainsi quand on arrivera à 10 en décimal ça équivaudra à A en hexadécimal.
Bref on est pas là pour faire des conversions mais l'idée est là !

---

Teintes de couleurs


Vous n'êtes pas sans savoir que pour former n'importe quelle couleur on peut utiliser les trois couleurs primaires : Rouge, Vert, Bleu  .

En faisant des mélanges on arrive à obtenir par exemple du jaune et mélangeant le rouge et le vert.

Ainsi pour l'ordinateur ces mélanges vont s'interpréter par des teintes de rouge, vert ou bleu.
Donnant nom ainsi aux formats RGB (Red, Green, Blue). 

Le codage de couleurs permet à chaque couleur primaire d'établir une palette de 255 teintes différentes.
Vous aurez donc un niveau de rouge variant de 0 à 255 idem pour les deux autres couleurs.

Admettons je veux que du bleu :

Rouge	Vert	Bleu
0	0	255

Comme je veux que du Bleu, les teintes de rouge et de vert seront minimales donc à 0.
Et celle du bleu sera maximale donc à 255.

On pourra donc avec ça convertir en hexadécimal.

---

Conversion décimal => hexadécimal


On a dit que nous on comptait en décimal : 255 est un nombre décimal ici.
L'ordinateur on a dit qu'il pouvait lire que de l'hexadécimal (binaire contracté), il va falloir convertir ça.
Prenons depuis le début :
0 teinte de rouge => 0 en hexadécimal .
0 teinte de vert => 0 en hexadécimal
255 teinte de bleu => un certain nombre en hexadécimal.

Ce nombre on peut le calculer de diverses manières :

• En allant sur un site de conversion automatique => c'est plus simple et vous vous perdrez moins surtout si vous avez du mal
  
• En faisant une succession de divisions euclidiennes
  
• En connaissant un résultat précis : 16² = 256
  

Pour la deuxième méthode je vais pas m'attarder dessus car elle est complexe quand on débute on prendra plutôt la troisième qui est largement plus rapide dans notre cas.

On sait que 16² = 256 donc en hexadécimal ça fait ça : 100 .
Or on va enlever 1 à ça vu qu'on veut 255, ça fera donc :  FF .
Bah oui si vous ajoutez 1 à FF  , flûte il n'y a plus de nombres dans la base hexadécimal il faut rajouter une centaine on recommence donc depuis le début : 100 .

---

Codage des teintes


Or les teintes de couleurs sont codées sur deux "index" vous l'avez bien vu :
255 valeur maximale en hexadécimal =   FF   , si on rajoute 1 seul chiffre on passe à 3 index : 100  .
0 valeur minimale en hexadécimal =  00  , on laisse les deux index pour laisser la place à d'éventuels changements.

Ce à quoi on peut compléter le tableau qu'on avait :

Rouge	Vert	Bleu
0	0	0
00	00	FF

On aura donc le code hexadécimal de la couleur bleue :  0000FF  .
On peut très bien le faire avec la couleur jaune : 

Rouge	Vert	Bleu
255	255	0
FF	FF	00

Le jaune se formant avec du rouge et du vert uniquement on met ces deux couleurs à des teintes maximales et donc le bleu en minimal.

Ca nous donne donc le code hexadécimal du jaune :  FFFF00  .


Pour les couleurs un peu plus complexes avec des teintes de rouge de bleu et de vert variées je vous conseille d'utiliser le logiciel que je vous avais partagé : ColorPicker .

Ainsi par exemple dans un code PAWN vous aurez la partie intéressante pour mettre vos couleurs de message :

Code:

SendClientMessage(playerid, 0xFFFF00FF, "Je suis en jaune et maintenant {0000FF}en bleu !");

Voilà je crois avoir tout dit dessus n'hésitez pas à poser des questions si vous avez du mal ou si vous voyez des choses floues dans le tuto

Merci pour le tutoriel !

J'ai pas galéré !!!

Merci, ça aidera pas mal de gens, je pense

merci !!