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:
Rouge | Vert | Bleu |
---|---|---|
OUI | NON | NON |
Soit:
Rouge | Vert | Bleu |
---|---|---|
FF | 00 | 00 |
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.
Rouge | Vert | Bleu |
---|---|---|
OUI | NON | OUI |
Soit:
Rouge | Vert | Bleu |
---|---|---|
FF | 00 | FF |
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
Rouge | Vert | Bleu |
---|---|---|
NON | NON | NON |
00 | 00 | 00 |
Le Blanc
Rouge | Vert | Bleu |
---|---|---|
OUI | OUI | OUI |
FF | FF | FF |
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
Ok. Sur ce principe comment doit on faire EN PRATIQUE ( teindre un vetement par exemple) pour composer une couleur a partir de teintes existantes.
En l espece ce qui m interesse c est :
#61D5D1. Sur une base 97% coton 3% elasthane
Merci