Comprendre les codes de couleurs hexadécimaux

En codage hexadécimal, comme en codage RVB, trois éléments viennent évaluer la quantité de couleur présente dans une nuance donnée. Le premier statue la quantité de rouge, le deuxième de vert, le dernier de bleu. La différence avec les codes RVB, c’est qu’ils ne contiennent que deux chiffres par élément (#RRVVBB). Pour parvenir à transformer un code RVB à neuf chiffres en un code hexadécimal à six chiffres, il faut utiliser un tableau de conversion : le codage hexadécimal comporte 16 valeurs numériques allant de 0 à F, le 0 étant compris dans ces valeurs.

• Les chiffres de 0 à 9 sont représentés tels quels.
• Le 10 devient la lettre A.
• Le 11 devient la lettre B.
• Le 12 devient la lettre C.
• Le 13 devient la lettre D.
• Le 14 devient la lettre E.
• Le 15 devient la lettre F.

Ce tableau suffit pour les couleurs les plus simples. Si l’on reprend les couleurs primaires utilisées plus tôt, où les éléments de codage correspondent à la quantité de couleur primaire présente dans chaque nuance (#RRVVBB), le résultat serait le suivant :

• Le code hexadécimal d’un rouge pur est #FF0000 : la valeur du rouge est à 255, qui est son maximum, les valeurs du vert et du bleu sont à 0, leur minimum.
• Le code hexadécimal d’un vert pur est #00FF00 : la valeur du vert est à 255, qui est son maximum, les valeurs du rouge et du bleu sont à 0, leur minimum.
• Le code hexadécimal d’un bleu pur est #0000FF : la valeur du bleu est à 255, qui est son maximum, les valeurs du rouge et du bleu sont à 0, leur minimum.

Enfin, le blanc, composé de toutes les couleurs primaires en synthèse additive, serait à #FFFFFF tandis que le noir, l’absence de couleurs en synthèse additive, serait à #000000.

Mais connaître ces éléments ne suffit pas lorsque l’on aborde des nuances plus complexes. Pour mieux comprendre comment fonctionne la conversion des codes couleurs RVB aux codes couleurs hexadécimaux, il faut revenir au chiffre 16 mentionné plus tôt : il s’agit des 16 valeurs numériques qui composent un code hexadécimal (de 0 à F, donc de 0 à 15, le 0 étant compris).

Chaque paire d’un code hexadécimal est en effet composée de deux numéros (#RR #VV #BB). Le premier numéro de chacune de ces paires correspond au nombre de paliers de 16 :

• 0x16 = 0 ; 1x16 = 16 ; 2x16 = 32, etc… Jusqu’à la valeur 9 : 9x16 = 144.
• A = 15x16 = 160 ; B = 11x16 = 176, etc… Jusqu’à la valeur F : 15x16 = 240.

Si vous regardez attentivement ces chiffres, vous verrez ainsi que la valeur maximale que l’on peut atteindre à partir du premier élément de codage s’élève à 240. Pourtant, comme on l’a vu, la valeur maximale d’une couleur RVB est de 255. C’est là que le deuxième chiffre intervient : il s’agit simplement de la valeur à ajouter au premier. Reprenons les codes Hex de nos couleurs primaires :

• Le codage hexadécimal d’un rouge pur est #FF0000. Le premier F correspond à la valeur 15, multipliée par 16 : 240. Le deuxième F correspond à la valeur 15 seule. Pour connaître la quantité de rouge de notre nuance, il suffit d’additionner ces deux valeurs : 15 x 16 + 15 = 240 + 15 = 255. Les paires suivantes ne contiennent que des zéros, la valeur RVB de notre rouge pur sera donc R255, V0, B0.
• Et ainsi de suite…

L’équation pour convertir un code hexadécimal en RVB sera donc la suivante :

• Première valeur x 16 + deuxième valeur = niveau de rouge de 0 à 255
• Troisième valeur x 16 + quatrième valeur = niveau de vert de 0 à 255
• Cinquième valeur x 16 + sixième valeur = niveau de bleu de 0 à 255

Des exemples pour s’entraîner

Le plus simple pour comprendre le code hexadécimal reste de s’entraîner avec des valeurs connues. Plutôt que de tâcher de convertir les codes RVB en codes Hex, vous pouvez utiliser la méthode inversée pour comprendre comment cela fonctionne. Prenons un blanc, dont nous savons que le code hexadécimal est #FFFFFF.

En simplifiant le code hexadécimal en nombres, le résultat de chaque paire sera : 15, 15 ; 15, 15 ; 15, 15. Multipliez le premier nombre de chaque paire, et ajoutez-y le deuxième nombre. L’équation sera la suivante :

• 15 x 16 + 15 = 240 + 15 = 255 ;
• 15 x 16 + 15 = 240 + 15 = 255 ;
• 15 x 16 + 15 = 240 + 15 = 255.

Le résultat de chaque paire sera donc le suivant :

• Niveau de la couleur rouge de 0 à 255 = 255 ;
• Niveau de la couleur verte de 0 à 255 = 255 ;
• Niveau de la couleur bleue de 0 à 255 = 255.

Vous savez désormais comment parvenir aux valeurs RVB de chaque couleur depuis un code hexadécimal. Vous pouvez vous entraîner sur un exemple plus difficile.

Prenez cette nuance de violet. Son code hexadécimal est le suivant : #3B2077.

En simplifiant le code en nombres, le résultat de chaque paire sera : 3, 11 ; 2, 0 ; 7, 7.

Multipliez le premier nombre de chaque paire, et ajoutez-y le deuxième nombre. L’équation sera la suivante :

• 3 x 16 + 11 = 48 + 11 = 59 ;
• 2 x 16 + 0 = 32 + 0 = 32 ;
• 7 x 16 + 7 = 112 + 7 = 119.

Le résultat de chaque paire sera donc le suivant :

• Niveau de la couleur rouge de 0 à 255 = 59 ;
• Niveau de la couleur verte de 0 à 255 = 32 ;
• Niveau de la couleur bleue de 0 à 255 = 119.

Cela fait sens puisque la couleur est une nuance de violet, et le violet comprend une majorité de bleu et de rouge. Le code RVB de notre nuance sera ainsi R59, V32, B119.

Les codes de couleurs hexadécimaux en graphisme

Comme on l’a vu, chaque couleur primaire possède 256 valeurs possibles (de 0 à 255, en comptant le 0). Cela correspond à R255 x V255 x B255 : les codes Hex permettent donc 16 777 216 combinaisons possibles, ce qui équivaut à bien plus que ce que l’œil humain peut distinguer ! Lorsque vous travaillez les couleurs sur vos applications de création, vous avez ainsi accès à toutes ces valeurs, ce qui donne une myriade de nuances.

Des outils pour travailler avec les codes de couleurs hexadécimaux

Si toutes ces explications concernant les codes de couleur hexadécimaux vous permettent de les comprendre et de les utiliser en toute autonomie, vous n’avez pas besoin de systématiquement convertir vous-mêmes vos codes Hex en valeur RVB : une application d’illustration vectorielle de référence comme Illustrator automatise le processus. Pour trouver les codes de couleurs hexadécimaux de votre illustration ou de votre image :

• Ouvrez Illustrator.
• Importez une image dans votre document.
• Sélectionnez l’outil Pipette.
• Cliquez sur la couleur dont vous souhaitez connaitre le code hexadécimal.
• La couleur de fond de votre document prend la même teinte.
• Double-cliquez sur la Couleur de fond de votre document.
• Les valeurs de cette dernière s’affichent automatiquement sur le menu Sélecteur de couleurs. Le code hexadécimal se trouve en bas de ce menu.

En procédant ainsi avec l’image ci-dessus, nous obtenons les valeurs suivantes : le code hexadécimal du jaune est #F1BA29. Le code hexadécimal du cyan est #68BFAA. Le code hexadécimal du blanc est #FFFFFF.

Toujours sur Illustrator, vous pouvez aussi simplement ouvrir un document, double-cliquer sur la couleur de fond, et ainsi ouvrir le menu Sélecteur de couleurs. En choisissant n’importe quelle teinte sur le nuancier, vous obtiendrez ses valeurs sur le tableau qui s’affiche.

Associer des couleurs

Maintenant que vous avez toutes les clés pour comprendre le système hexadécimal de codage des couleurs, vous souhaitez sans doute savoir quelles couleurs associer pour votre projet. Pas de panique, là aussi, il existe des outils qui vous accompagnent dans vos choix. Adobe Color permet d’harmoniser ses couleurs et de les modifier de manière interactive. L’application existe en tant que site web et en tant qu’extension de Photoshop.

• Rendez-vous sur le site web Adobe Color.
• Sur le menu Explorer, de nombreux thèmes s’affichent.
• Sélectionnez une palette de couleur qui vous plaît.
• Chacune des couleurs du thème s’affiche avec son code hexadécimal.
• Dans le menu à droite, vous pouvez télécharger ce thème et réutiliser ses couleurs pour votre projet.

Créer son propre thème de couleurs

Vous pouvez créer votre propre thème de couleurs avec Adobe Color.

• Rendez-vous sur le site web Adobe Color.
• Dans le menu Créer, sélectionnez une couleur qui vous plait sur la roue chromatique.
• Dans le menu défilant Règle d’harmonie chromatique, de nombreuses options s’affichent.
• L’option Monochrome affiche les nuances d’une même couleur. L’option Complémentaire affiche les nuances d’une couleur et les nuances de sa couleur complémentaire. L’option Triade vous permet de travailler avec les nuances de trois couleurs. Etc…
• Sélectionnez une option de Règle d’harmonie chromatique.
• Les couleurs s’affichent en dessous de la roue chromatique. Dans le menu Mode colorimétrique RGB, vous pouvez trouver le code hexadécimal et les valeurs RVB de chacune des nuances de votre palette.

Vous comprenez désormais le fonctionnement des codes de couleurs hexadécimaux, leur usage en conception graphique et en association des couleurs. À vous de les employer en accord avec votre projet !