Article original : How Hex Code Colors Work – and How to Choose Colors Without A Color Picker
Par Nahla Davies
Peu importe le type de projet de codage que vous entreprenez, il est probable qu'à un moment donné vous allez commencer à travailler avec des couleurs. Cela est particulièrement vrai si – comme beaucoup de gens – vous apprenez à coder en utilisant HTML pour concevoir des pages web.
Lorsque vous commencez à concevoir en couleur, vous utiliserez probablement une sorte d'interface graphique pour choisir les couleurs que vous souhaitez utiliser avant de les appliquer aux différents éléments de votre page.
Cependant, à mesure que vous devenez plus confiant dans l'utilisation de HTML, et que vous commencez à regarder le code lui-même plutôt que simplement votre éditeur graphique, vous remarquerez que les couleurs que vous choisissez sont désignées par des codes étranges comme #ff0000.
Ces codes sont appelés codes de couleur hexadécimaux, et ils font partie intégrante du fonctionnement de HTML et CSS. Apprendre comment ils fonctionnent vous fera non seulement gagner beaucoup de temps, mais rendra également votre code plus rapide, plus élégant et plus fiable.
Dans ce guide, nous allons vous expliquer tout ce que vous devez savoir sur les codes de couleur hexadécimaux, et vous montrer comment les utiliser dans votre propre projet.
Que signifie Hexadécimal ?
Commençons par la partie "hex" du terme "code de couleur hexadécimal". Hex, dans ce contexte, signifie "hexadécimal", un système de numération dans lequel il y a 16 chiffres de base, plutôt que les 10 plus familiers.
C'est le système de numération utilisé par HTML, et d'ailleurs par de nombreux autres langages de programmation, et c'est donc la manière dont les couleurs sont enregistrées dans le langage.
L'hexadécimal, comme son nom l'indique, est un moyen d'encoder un système de numération en base 16. Le décimal, notre système de numération régulier que vous connaissez déjà, est en base 10. L'hexadécimal utilise les mêmes chiffres que le système régulier pour les dix premiers nombres (donc 0 – 9) puis passe aux lettres, donc les nombres 10 – 15 sont encodés en utilisant les lettres A – F.
À titre d'anecdote intéressante, la raison principale pour laquelle l'hexadécimal est utilisé est qu'il possède un lien naturel avec le système binaire utilisé par votre ordinateur à un niveau plus basique.
Les nombres binaires sont couramment exprimés comme une puissance de 2, et 16 est 2^4. Cela facilite la conversion entre l'hexadécimal et le binaire (bien que nous ne le fassions pas aujourd'hui).
Vous n'avez pas besoin de savoir cela pour utiliser les codes de couleur hexadécimaux, mais cela pourrait être utile la prochaine fois que vous voudrez impressionner quelqu'un.
Quels composants constituent une couleur ?
Comment utilisons-nous le système hexadécimal pour encoder les couleurs en RVB ?
Les couleurs affichées sur un écran d'ordinateur sont composées de trois éléments, qui correspondent aux trois couleurs présentes dans chaque pixel de votre écran. Si vous regardez de très près (ou si vous avez un écran ancien), vous pourrez les voir – rouge, vert et bleu.
Par conséquent, la manière dont nous encodons les couleurs consiste à spécifier la quantité de lumière que chaque partie rouge, verte et bleue (RVB) de vos pixels doit émettre. Par exemple, une valeur RVB (un type de valeur utilisé dans de nombreux systèmes logiciels différents) pourrait ressembler à ceci : RVB (255, 0, 0).
255 est la valeur maximale pour un composant, donc cette valeur indique que le premier composant (rouge, ou R) doit être au maximum, et les deux autres doivent être au minimum. Et cela nous donnera (vous l'avez deviné) du rouge pur.
(Incidemment, la raison pour laquelle 255 est la valeur maximale est également liée à la facilité d'utiliser cette valeur [ou, en fait, 256 incluant 0] en binaire. 256 est 2^8. Mais c'est une autre anecdote que vous n'avez vraiment pas besoin de connaître.)
Les lecteurs attentifs parmi vous auront déjà remarqué que, même à ce stade, il est assez simple de travailler avec les couleurs sous cette forme. Le noir, en valeur RVB, est RVB (0,0,0), et le blanc est RVB (255,255,255). Vert ? C'est exact, RVB (0,255,0).
Comment fonctionnent les couleurs hexadécimales
Maintenant que nous savons comment fonctionnent les couleurs, nous pouvons examiner un vrai code de couleur hexadécimal. Prenons, par exemple, #ff0000, et combinons nos connaissances pour comprendre ce qu'il signifie.
Jetez un coup d'œil à votre tableau hexadécimal, et vous verrez que "FF" se traduit par "255" en encodage standard, base-10.
_Cela devrait être un indice. Les deux premiers caractères de ce code de couleur hexadécimal (et, en fait, de tous les codes de couleur hexadécimaux) font référence au composant rouge, et ici la valeur est 255. Les deux caractères suivants font référence au composant vert, et les deux derniers au bleu.
À partir de là, vous pouvez déterminer ce que signifie #ff0000 lorsqu'il est traduit en couleur – c'est la même chose que RVB (255,0,0). C'est-à-dire du rouge pur. De même, #ff00ff indique un maximum de rouge et de bleu simultanément, ce qui produit du magenta :
C'est à ce moment-là que vous pourriez commencer à reconnaître la valeur et l'élégance des codes de couleur hexadécimaux. Parce qu'ils utilisent l'hexadécimal, et parce que 255 est la valeur maximale pour un composant, chaque couleur possible peut être exprimée en utilisant seulement 6 chiffres.
Ce système signifie également qu'il existe une énorme gamme de couleurs disponibles, car chaque composant peut prendre n'importe quelle valeur de 0 à 255. Faites le calcul du nombre de combinaisons différentes possibles, et vous trouverez qu'il y a 16 777 216 couleurs disponibles.
Comment utiliser les abréviations des codes hexadécimaux
À ce stade, puisque vous comprenez les codes de couleur hexadécimaux, vous pouvez commencer à les utiliser dans vos projets web au lieu d'utiliser un sélecteur de couleurs sur votre interface graphique.
Cependant, avant d'en arriver là, il est important de réaliser que ces deux options ne sont pas les seules qui s'offrent à vous.
HTML, parce qu'il a été conçu pour être facile à utiliser, permet également d'utiliser des codes hexadécimaux abrégés. Le rouge, qui est #FF0000 en code hexadécimal, peut être raccourci en #F00. C'est-à-dire un chiffre pour le rouge, un chiffre pour le vert, un chiffre pour le bleu. Les navigateurs interpréteront #FF0000 et #F00 comme exactement la même couleur.
Cela réduit le nombre total de couleurs possibles à environ 4 000. Cependant, cela présente d'autres avantages.
Tout comme vous pouvez utiliser des raccourcis pour optimiser la livraison CSS, encoder vos couleurs en utilisant des abréviations peut améliorer les performances de vos pages web. Cela peut ne pas être visible lorsque vous travaillez avec de petites pages, mais peut avoir un impact significatif à mesure que vos projets deviennent plus complexes.
Comment utiliser vos propres codes hexadécimaux
À ce stade, vous devriez être prêt à commencer à utiliser des codes hexadécimaux au lieu du sélecteur de couleurs de votre logiciel de conception web. La plupart des constructeurs de sites web vous permettent d'entrer un code hexadécimal au lieu de cliquer sur une couleur avec une souris, et cette approche présente plusieurs avantages clés.
Le premier est qu'il est plus facile de garder une trace des couleurs que vous utilisez. Lorsque vous concevez en utilisant un sélecteur de couleurs, il est facile d'utiliser accidentellement une couleur qui est très proche, et donc presque indiscernable, de celle que vous voulez vraiment.
Cela signifie que avant de vous en rendre compte, vos pages sont dans deux nuances de rouge similaires mais distinctes. Utiliser un code hexadécimal signifie que vous obtiendrez la même couleur à chaque fois.
Deuxièmement, l'utilisation de codes hexadécimaux permet un niveau de contrôle fin sur vos couleurs qui n'est pas possible avec un sélecteur de couleurs.
Aucun sélecteur de couleurs ne peut contenir les 16 millions de couleurs disponibles lorsque vous utilisez HTML, mais en écrivant vos propres codes de couleur, vous pouvez incrémenter les nuances qui vous sont disponibles une valeur à la fois.
Troisièmement, une compréhension du fonctionnement des couleurs sur un écran d'ordinateur est inestimable lorsqu'il s'agit de concevoir des pages web, ou en fait tout logiciel. Avec juste un peu d'insight sur la manière dont vos appareils interprètent le code et affichent les couleurs, vous pouvez commencer à utiliser des codes hexadécimaux pour mélanger des couleurs, et également vous assurer que la couleur que vous souhaitez afficher est celle qui apparaît réellement sur les écrans de vos utilisateurs.
Aller plus loin
S'amuser avec les codes de couleur hexadécimaux en HTML peut être amusant, mais cela a aussi un objectif sérieux. Presque tous les logiciels de manipulation d'images utilisent le même encodage, et donc apprendre comment fonctionnent les codes de couleur hexadécimaux ajoutera une compétence utile et fondamentale à vos connaissances en codage.
Jetez un coup d'œil à comment fonctionne le JPG, par exemple, et maintenant vous serez déjà familier avec certains des termes. La prochaine fois que vous construisez une page web, abandonnez le sélecteur de couleurs, et codez vos couleurs à la main.