Juin
22

Comprendre le code couleur en CSS

A quoi correspondent les codes couleurs en CSS du style #1a6bff ? Découvrez comment sont composées les couleurs. Créez les vous même en dosant les couleurs primaires.

Système de couleurs additif

Système de couleur additif

Les érans utilisent trois couleurs à savoir le rouge, le vert et le bleu. Chaque couleur est « allumée » avec plus ou moins d’intensité.

Les trois faisceaux sont ajoutés les uns aux autres. On appelle ce système synthèse additive.

De cette façon on peut afficher n’importe quelle couleur :

  • un mélange de rouge, de vert et de bleu suivant l’intensité de chacune. Par exemple, en mélangeant du bleu et du vert avec leur intensité maximale on obtient du cyan
  • du blanc en utilisant les trois couleurs à leur intensité maximale
  • du noir en n’affichant rien.

Composition des codes couleurs en CSS

Ecriture traditionnelle

Quantité de rouge, vert, bleu

Comment écrire la composition d’une couleur ?

C’est assez simple sur le principe.

Les couleurs HTML, comme vous avez pû le constater sont composées de 6 caractères. Parfois on peut les réduire à 3. Je reviendrai dessus plus bas.

6 caractères pour 3 couleurs, ça nous laisse donc 2 caractères pour définir la quantité de chaque couleur.

En HTML, par convention une couleur doit commencer par le signe #.

Ensuite les deux premiers caractères définissent la quantité de rouge, les deux suivants celle du vert et les deux derniers celle du bleu.

Des chiffres et des lettres

Oui, bon, OK, c’est un jeu de mots pourri. Le sujet n’a rien à voir avec le jeu télévisé :)

Pourquoi trouve-t-on une suite de chiffres et de lettres dans la notation ?

Nous comptons naturellement en décimal (base 10) mais en informatique, pour des raisons techniques, c’est soit le binaire (base 2), soit l’hexadécimal (base 16) qui est utilisé.

Dans le cas présent il faut utiliser l’hexadécimal.

C’est à dire qu’au lieu de compter de 0 à 9 on va compter de 0 à 15.

Mais comme les nombre des 10 à 15 sont sur deux caractères on va les remplacer par des lettres pour qu’ils tiennent en un seul.

Donc l’hexadécimal se note de 0 à 9 puis de A à F.

Comme une couleur se note sur deux caractères, nous obtenons 16×16 soit 256 nuances de 00 à FF pour chacune d’entre elles.

Et puisqu’il y’a 3 couleurs primaires, nous pouvons utiliser 256^3 couleurs soit 16777216 possibilités.

Autre notation

Il existe une autre écriture plus récente qui peut prendre deux formes.

Nous pouvons soit utiliser des valeurs relatives soit absolues mais  cette fois en décimal et non en hexadécimal, ce qui est plus compréhensible pour nous.

La notation est la suivante :

rgb ( x, y, z)

x, y et z sont la valeur de chaque couleur dans le même ordre que précédemment à savoir : rouge, vert puis bleu.

Nous pouvons écrire les quantité soit :

  • en valeur absolue décimale de 0  à 256
  • en valeur relative de 0 à 100%

Par exemple :

rgb ( 10, 203, 176)

ou

rgb ( 50%, 12%, 98%)

Couleurs prédéfinies

Il existe des couleurs que l’on peut appeler par leur nom, cependant, pour éviter toute variation d’un navigateur à l’autre, préférrez la notation hexadécimale ou décimale.

Par exemple prenons une couleur qui s’appelle navy qui représente un bleu marine.

Toutes ces couleurs prédéfinies ont une correspondance en hexadécimal.

La couleur précitée peu s’écrire : #000080 ou rgb(0,0,128) ou rgb(0%,0%,50%).


Notation raccourcie

Dans le cas des couleurs hexadécimales, il est possible dans certains cas de diminuer la notation pour la passer à 3 chiffres.

Par exemple la couleur #AA9922 peut s’écrire #A92.

Ca ne fonctionne que si chaque couleur a deux caractères identiques.

Dans l’exemple le A sera équivalent à AA et non pas à A0 ou 0A.

Attention cette notation fonctionne en CSS mais pas en HTML (donc seulement dans un attribut style ou dans une feuille de style dans le header ou dans un fichier à part).

Outils

 

Articles similaires :

2 Comments to “Comprendre le code couleur en CSS”