Mieux comprendre les couleurs héxadécimales

Qu’est-ce que c’est ?

Bien qu’il soit autorisé de mettre les noms des couleurs (en anglais) dans vos fichiers CSS, vous n’utilisez pas souvent cette méthode car la palette disponible est très limitée.

Pour désigner une couleur en CSS, on utilise le plus souvent sa notation hexadécimale, soit un code commençant par un dièse (#), composé de 3 paires de chiffres et/ou de lettres.

La notation héxadécimale

Un triplet hexadécimal est un nombre hexadécimal à 6 chiffres mémorisé sur trois octets utilisé en HTML et dans les feuilles de style en cascade (CSS), et d’autres applications, pour représenter les couleurs. Les octets représentent les composantes rouge, vert et bleu de la couleur. Un octet représente au moins l’intervalle entre 00 et FF . Wikipedia

Regardons tout de suite un exemple, ce sera plus clair 😉 :

HTML

<span class="hexa">
Voici un texte en rouge
</span>

CSS

.hexa{
color:#FF0000; /* N'oubliez ni le dièse avant, ni le point-virgule après! */
}

Résultat:

Voici un texte en rouge

Dans cet exemple, la couleur est désignée par le code « FF0000 ». Décomposons ce code:

• FF désigne la composante Rouge
• 00 la composante Verte
• et 00 la composante Bleue

Comment écrire ces codes de couleurs ?

« FF » et « 00 » sont les deux extrêmes de l’échelle. on peut dire que:

• « FF » équivaut à « Oui »
• « 00 » équivaut à « Non »

Les couleurs primaires

Le rouge étant composé de 100% de rouge, 0% de vert et 0% de bleu, on peut le noter ainsi:

Soit:

Simple, n’est-ce pas ?

Pour écrire ou lire le rouge, le vert ou le bleu, c’est enfantin.

Les couleurs secondaires

Pour certains mélanges faciles, comme le violet (rouge + bleu), vous pouvez aussi vous débrouillez, mais ce n’est pas très précis.

Soit:

Le noir et le blanc

Le Noir et le Blanc suivent la même logique: le Noir étant l’absence de couleur et le blanc la fusion de toutes les couleurs.

Le Noir

Le Blanc

Un dégradé

Vous pouvez vous amuser à faire un dégradé de gris en jouant avec les chiffres de 0 à 9 comme ceci:

#111111
#222222
#333333
#444444
#555555
#666666
#777777
#888888
#999999

Les couleurs nuancées et exotiques

Quand il s’agit de trouver le code correspondant au bleu turquoise ou au jaune orangé, le calcul devient plus compliqué.

A ce moment, je vous conseille l’utilisation d’une « pipette« .

Il s’agit d’un petit outil, similaire à celui que l’on trouve dans Photoshop, présentant une pipette que l’on manie avec la souris. Un clic sur une zone colorée vous donne le code correspondant.

Il existe des dizaines de pipettes dans ce genre.

Parmi les plus utilisés, on retrouve beaucoup de plugin pour firefox, safari ou chrome. Mais je vous déconseille ces outils car vous êtes limités à cliquer sur des éléments affichés par votre navigateur seulement.

Pour ma part, j’utilise depuis de nombreuses années le logiciel gratuit La boîte à couleurs. Si vous êtes sur Windows, je vous le conseille grandement. Il liste un grand nombre de couleurs, classées selon différentes catégories.

Il possède également un convertisseur RGB/Hexadécimal que vous utiliserez sans doute souvent!

La notation décimale (ou rgb)

Il existe une autre notation pour désigner les couleurs dans vos CSS. Il s’agit de la notation RGB: Red Green Blue (ou RVB : Rouge Vert Bleu).

Vous pouvez choisir de l’utiliser plutôt que l’autre, mais le principe de fonctionnement est très proche.

Regardons quand même un exemple :

HTML

<span class="deci">
Voici un autre texte en rouge
</span>

CSS

.deci{
color:rbg(255, 0, 0);
}

Résultat:

Voici un autre texte en rouge

Dans cet exemple, la couleur est désignée par le code : 255, 0, 0. Décomposons ce code:

• 255 désigne la composante Rouge
• 0 la composante Verte
• et 0 la composante Bleue

On remarque tout de suite la similitude entre les deux notations. Outre une petite différence de syntaxe, ce qui change entre les deux n’est pas tant la structure du code mais l’unité de mesure.

La première se compose de duo de lettres et de chiffres, tandis que la seconde suit une échelle de 0 à 255 .

En conclusion

Le but de cette explication n’est pas de vous donner la possibilité de retrouver toutes les couleurs. Comme vous le voyez les combinaisons sont multiples et variées, et surtout impossible à retenir par cœur!

Mais en comprenant le fonctionnement général, ces codes vous paraîtront moins obscurs à manipuler.

Allez, une dernière astuce pour la route.

La notation hexadécimale raccourcie

Saviez-vous que vous pouvez raccourcir les codes composés de paires identiques ? Par exemple:

• #FFCC00 = #FC0
• #FFFFFF = #FFF
• #FF0022 = #F02
• etc