Qu'est-ce que le code hexadécimal? Tout ce que tu as besoin de savoir

Travailler avec des couleurs en HTML est relativement simple. Avec quelques déclarations CSS simples, vous pouvez modifier la couleur de n'importe quel texte ou arrière-plan de votre page Web. Mais comment spécifiez-vous une couleur? La réponse à cette question nous emmènera dans un trou de lapin qui nous mènera finalement au concept de codes de couleur hexadécimaux.

Si vous avez déjà travaillé avec HTML ou CSS, vous avez probablement entendu le terme code hexadécimal. Mais qu'est-ce qu'un code hexadécimal exactement? Quels sont quelques exemples de codes hexadécimaux? Quelle est la différence entre un code hexadécimal et un code couleur RVB ?

Qu'est-ce qu'un code hexadécimal ?

Lorsque vous commencez à travailler avec la couleur, vous pouvez utiliser une interface graphique pour choisir les couleurs à appliquer aux éléments de votre page. Lorsque vous commencez à regarder le code sous-jacent plutôt que simplement votre éditeur graphique, vous constatez que les couleurs apparaissent comme des séquences de caractères étranges. De telles séquences sont connues sous le nom de codes hexadécimaux; ils ressemblent à ceci:

#FF0092

En rapport: Termes essentiels de conception graphique que vous devez connaître

Vous pouvez spécifier des couleurs en CSS de différentes manières. Vous pouvez utiliser les noms de certaines couleurs prédéfinies telles que rouge et magenta foncé. Cependant, pour spécifier des nuances de couleur exactes, vous devrez utiliser une mesure plus précise: quelque chose de numérique.

CSS propose deux options principales: RVB et hexadécimal. Dans les deux formats, vous spécifiez les quantités de rouge, de vert et de bleu qui composent la couleur finale. RVB utilise trois nombres entre 0 et 255. Hex fait exactement la même chose, juste avec une base différente (16) de la décimale (10) à laquelle vous êtes habitué.

Hex utilise les lettres A-F, en plus des chiffres 0-9, pour un total de 16 symboles. A en hexadécimal est l'équivalent de 10 en décimal. F en hexadécimal vaut 15 en décimal.

Comment fonctionnent les codes de couleur hexadécimaux ?

Dans sa forme la plus élémentaire, un code hexadécimal est une représentation de la quantité de rouge, de vert et de bleu existant dans une couleur. Un code hexadécimal se compose de six caractères. Les deux premiers se rapportent à la quantité de rouge dans le mélange, les deux suivants à la quantité de vert et les deux derniers chiffres reflètent la quantité de bleu. Les codes hexadécimaux font référence à des couleurs spécifiques, permettant aux concepteurs et aux développeurs de communiquer facilement sur les schémas de couleurs.

Avec 16 × 16 (256) valeurs pour chaque composante de couleur, il y a alors 256 × 256 × 256 combinaisons possibles. En hexadécimal, ils vont de #000000 (noir pur) à #FFFFFF (blanc pur).

Comment lire les codes de couleur hexadécimaux

Il est facile de comprendre les codes de couleur hexadécimaux. Prenons l'exemple de #FF5733. Tout d'abord, divisez les six caractères en trois parties contenant chacune deux caractères. Comme vous le savez, les deux premières parties représentent le rouge, les deux deuxièmes représentent le vert et les deux troisièmes représentent le bleu. Ainsi, dans notre exemple :

• La composante rouge, RR, a la valeur FF.
• La composante verte, GG, est 57.
• La composante bleue, BB, est 33.

Maintenant, pour trouver l'intensité de ces segments de couleur, vous devez calculer le nombre hexadécimal en suivant ces trois étapes :

1. Multipliez le premier caractère hexadécimal de RR par 16. Si le caractère est une lettre, convertissez-le en sa valeur correspondante. Dans ce cas, le premier caractère est F qui est 15. Ainsi, pour notre exemple, vous multipliez 15 × 16, ce qui équivaut à 240.
2. Ensuite, ajoutez le deuxième caractère de RR. Encore une fois, convertissez une lettre à sa valeur correspondante, si le besoin s'en fait sentir. Dans notre exemple, le deuxième caractère est F qui est égal à 15.
3. Une fois cela fait, additionnez les totaux pour obtenir une valeur unique. Si vous ajoutez 240 et 15 de notre exemple, vous verrez que la valeur de FF est 255.

Répétez la même formule pour les deux segments restants, GG noté 57 et BB noté 33. Si les calculs manuels semblent trop écrasants, vous pouvez toujours utiliser un outil de conversion hexadécimal vers RVB (comme Convertisseur BinaryHex) pour lire une couleur. Vous devriez trouver que la valeur hexadécimale #FF5733 est équivalent à RVB (255, 87, 51).

Pourquoi le code couleur hexadécimal est-il si populaire ?

Bien qu'il existe plusieurs modèles de couleurs différents (RVB, CMJN, HSL), les codes de couleur hexadécimaux sont peut-être la représentation la plus largement utilisée. C'est parce qu'ils sont simples et faciles à comprendre.

Un format à largeur fixe est également très utile. Les couleurs hexadécimales pleine longueur sont toujours composées de sept caractères, y compris le premier # symbole.

Les couleurs hexadécimales sont très efficaces, n'utilisant que ces sept caractères pour représenter plus de 16 millions de couleurs. Et différencier ces couleurs est un processus simple.

Hex contre RVB: y a-t-il une différence ?

Le système RVB de codage couleur utilise trois nombres décimaux pour indiquer les intensités relatives du rouge, du vert et du bleu. Il utilise les chiffres 0-9.

Hex utilise également trois nombres pour représenter le rouge, le vert et le bleu, mais il utilise des chiffres supplémentaires (A-F) pour répondre à la base 16. Il n'y a pas de différence dans les couleurs obtenues, ce sont simplement des formats différents pour communiquer la même information.

En rapport: CSS Fundamentals: Travailler avec les couleurs

À quoi sert le code hexadécimal ?

Une variété d'applications différentes utilisent le RVB, des écrans de télévision aux appareils mobiles, aux jeux et aux panneaux. Vous verrez principalement des codes de couleur hexadécimaux dans la conception Web et d'autres programmes graphiques.

Vous pouvez également voir les codes hexadécimaux comme un moyen universel d'identifier les couleurs. De nombreux sites Web les utilisent pour identifier une couleur spécifique car ils sont courts et, généralement, sans ambiguïté dans leur contexte.

Le code de couleur hexadécimal n'est pas sorcier

Donc, vous avez là les bases des codes de couleur hexadécimaux. Ce ne sont pas exactement de la science dure, mais ils servent un objectif précis dans la conception (et dans le monde de la technologie). Si vous recherchez un outil qui vous aidera à comprendre le fonctionnement des couleurs hexadécimales ou un outil qui vous apprendra la théorie du mélange RVB, il y en a beaucoup en ligne. N'oubliez pas que la clé pour apprendre quelque chose de nouveau est d'y aller une étape à la fois.

Les codes de couleur hexadécimaux ne sont pas la chose la plus excitante au monde, mais il est essentiel de les comprendre si vous travaillez dans la conception Web. Pouvoir travailler avec des codes de couleur hexadécimaux facilitera grandement votre travail de conception.

Comment trouver la valeur hexadécimale de n'importe quelle couleur sur votre écran

Apprenez à sélectionner n'importe quelle valeur de couleur sur votre écran en quelques secondes. Particulièrement utile pour les concepteurs de sites Web !

Lire la suite

A propos de l'auteur