Il existe trois moyens différents de noter les couleurs pour les navigateurs les reconnaissent : avec leur nom (anglais), un code hexadécimal ou en RGB
Couleur nommées
Il s'agit d'utiliser le nom de la couleur dans le code. Voici un petit aperçu des couleurs pouvant être utilisé de cette façon.
Red
Blue
Yellow
Green
Maroon
Lime
Gray
Fuchsia
Purple
Silver
Teal
White
Aqua
Olive
Navy
Black
Il en existe d'autre, mais je vous laisserais le soin de les chercher sur internet.
C'est la méthode la plus simple pour utiliser rapidement un couleur.
CSS
sélecteur { color: red;}
HTML
<balise color="red" />
Code Héxadécimal
Permettant de faire plus de 16 millions de couleurs, cette façon d'écrire les couleurs est beaucoup plus complète que la précédente.
On utilise la notation suivante :
#RRVVBB
On utilise ensuite des chiffres de 1 à 9 et des lettres de A à F que l'on associe par paire pour indiquer les intensités de rouge, de vert et de bleu de la couleur voulue. Les deux premier correspondent au rouge, ceux du milieu au vert et les derniers au bleu. Le F est la teinte la plus intense, et le 0 la plus sombre. Ce type de code est toujours précédé du symbole #
Ainsi, si je veux du rouge,j'obtiens le code suivant:
CSS
sélecteur { color: #ff0000;}
HTML
<balise color="#ff0000" />
Couleur RGB
Ce type d'écriture fonctionne de la même manière qe les couleurs héxa: il faut définir 3 valeurs, une pour le rouge, le vert et le bleu.
rgb(R,V,B)
Gardons la couleur rouge. J'obtient le code suivant :
CSS
sélecteur { color: rgb(255,0,0);}
HTML
<balise color="rgb(255,0,0)" />
255 est la valeur maximum que peut prendre cette couleur. Si ce nombre ne vous parle pas, vous pouvez utiliser la même notation avec des pourcentages
CSS
sélecteur { color: rgb(100%,0,0);}
HTML
<balise color="rgb(100%,0,0)" />
Canal Alpha
Il est également possible de créer des couleurs transparentes en rajoutant un canal dans la notation rgb : le canal alpha. Il permet de gérer l'opacité de la couleur entre 0 (invisible) et 1 (visible)
Dans l'exemple suivant, j'ai un rouge à 50% d'opacité.
CSS
sélecteur { color: rgba(255,0,0,0.5);}
HTML
<balise color="rgba(255,0,0,0.5)" />