Comprendre les codes de couleurs hexadécimaux

Les codes de couleurs hexadécimaux, plus communément appelés codes Hex, se composent du symbole # suivi de trois paires de chiffres représentant chacune la quantité de couleurs primaires RVB (rouge, vert, bleu) présentes dans la nuance choisie. Si les codes Hex sont présents dans le quotidien de tous, puisque ce sont les lignes de code qui définissent les couleurs sur les appareils électroniques, les graphistes en ont particulièrement l’usage. Pourtant, la plupart des usagers des codes Hex ne savent pas comment ces derniers fonctionnent. Voici les informations essentielles à connaître sur les codes de couleurs hexadécimaux.

Charte des couleurs et codes hexadécimaux

Graphique : les couleurs et leurs codages

Qu’est-ce que qu’un code hexadécimal ?

Si vous regardez en profondeur vos applications de traitement des couleurs, vous verrez que plusieurs éléments de codage apparaissent lorsque vous en sélectionnez une. Ils indiquent la présence des différentes couleurs dans une nuance choisie. En print, on privilégiera le code CMJN qui correspond à la présence respective de cyan, de magenta, de jaune et de noir dans une couleur donnée. C’est parce que les quatre couleurs utilisées en imprimerie sont ces dernières. En version digitale, les couleurs primaires sont le rouge, le vert et le bleu (RVB).

 

La quantité de chacune de ces trois couleurs est comprise entre 0 et 255. Le premier élément évalue la quantité de couleur rouge d’une nuance, le deuxième sa quantité de couleur verte, et le troisième sa quantité de couleur bleue.

Couleurs primaires en CMJN et RVB sur une imprimante et un ordinateur

Les couleurs primaires en CMJN et en RVB

  • Le codage RVB d’un rouge pur reviendra par exemple à R255, V0, B0 : le rouge est à son maximum, et le vert et le bleu à leur minimum.
  • Le codage RVB d’un vert pur reviendra par exemple à R0, V255, B0 : le vert est à son maximum, et le rouge et le bleu sont à leur minimum.
  • Le codage RVB d’un bleu pur reviendra par exemple à R0, V0, B255 : le bleu est à son maximum, et le rouge et le vert sont à leur minimum.

Les codes de couleurs hexadécimaux en codage

Seulement voilà, étant donné la quantité considérable de couleurs visibles par l’œil humain, utiliser le RVB serait inutilement complexe en codage : chaque nuance devrait comprendre neuf chiffres, et la marge d’erreur serait considérable. Les codes hexadécimaux viennent apporter une solution à ce problème, en écourtant le code RVB attribué à chaque couleur.

Tâches de couleurs rouge, verte, bleue

Rouge, vert et bleu

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.

Du noir et du blanc pour illustrer les couleurs hexadécimales

Noir et blanc : couleurs hexadécimales #000000 et #FFFFFF

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.

Un cadre blanc au code hexadécimal #FFFFFF

Un carré blanc. Code hexadécimal #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.

Une nuance de violet au code couleur hexadécimal #3B2077

Une nuance de violet. Code couleur hexadécimal #3B2077

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.

Deux cercles chromatiques

Des cercles chromatiques

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.
Quatre illustrations de fleur

Exemple avec une illustration de fleurs

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 !

Ces contenus pourraient également vous intéresser…

Plan général d’un paysage urbain

Qu’est-ce qu’un plan général ?

Les plans généraux sont essentiels pour indiquer où et souvent quand l’action a lieu.

Illustration vectorielle d'un guépard une nuit de pleine lune.

Qu'est-ce que l'art vectoriel ?

Découvrez tous les secrets de la création d'œuvres d'art et d'illustrations avec ce format de fichier adaptable.

Dessin à l'encre d'arbres dans le brouillard.

Se démarquer grâce à l'encre

Explorez la subtilité et la puissance du dessin à l'encre grâce à ces conseils et techniques.

Croquis au crayon de la silhouette de la ville de New York

Essayer le croquis au crayon

Pour la plupart des artistes, le croquis au crayon est une première étape essentielle. Découvrez comment cette compétence peut améliorer votre démarche artistique.