Les Couleurs en CSS
Les mots-clés
Les mots-clés ? Kesako ?
Il existe plusieurs méthodes pour définir la couleur en CSS.
La plus simple, et sûrement la plus connu, est l'utilisation des "mots-clés". Si vous connaissez quelque peu le HTML, mais aussi l'anglais, cela vous parraîtra simple.
Il existe 17 mots-clés, soit 17 couleurs nommées par leur nom anglais :
Source du schéma : Spécification CSS 2.1 du W3C
En dessous de chaques mots-clés, vous pouvez voir la valeur hexadécimale des couleurs. Nous verrons un peu plus bas comment utiliser les valeurs hexadécimales.
Comment utiliser les mots-clés ?
Vous devrez utiliser la propriété color ou background-color, puis donner une valeur à l'une de ces 2 propriétés.
Cette valeur devra correspondre au nom d'une couleur, donc à un mot-clé.
Premier exemple :
h3 {color : blue ;}
Dans cet exemple, la couleur du texte contenu entre les balises <h3> </h3> sera de couleur bleu.
Second exemple :
h4 {background-color : orange ;}
Cette fois, nous changeons la couleur de fond, puisque nous utilisons la propriété background-color.
La couleur de fond de notre texte, contenu entre les balises <h4> </h4>, sera donc de couleur orange.
Existe t-il d'autres mots-clés ?
Il existe d'autres mots-clés, mais ils ne sont pas reconnus par tous les navigateurs. C'est pourquoi ils ne font pas partis des 17 mots-clés dits "normalisés".
Pour + de détails, vous pouvez consulter : SVG color keywords dans le module CSS 3 Color.
Notation hexadécimale
La notation hexadécimale, Qu'est-ce que c'est ?
Si vous voulez utiliser une palette de couleurs plus étendue, vous devrez spécifier vos couleurs en utilisant le caractère dièse # suivie de trois chiffres hexadécimaux compris entre 0 et 9, ainsi que a et f.
On peut dire que les lettres a et f représentent les chiffres 10 et 15.
- Le premier chiffre spécifiera les composantes rouges de la couleur désirée
- le second chiffre spécifiera les composantes vertes,
- et le troisième spécifiera les composantes bleues.
Exemple :
| black | #000
| |
| red | #f00
| |
| green | #0f0
| |
| blue | #00f
| |
| white | #fff
|
Toujours + de couleurs !
Si vous voulez utiliser une palette de couleurs encore plus étendue, vous pouvez spécifier deux chiffres hexadécimaux pour chaque composante.
| black | #000000
| |
| red | #ff0000
| |
| green | #00ff00
| |
| blue | #0000ff
| |
| white | #ffffff
|
Exemple d'utilisation :
Si vous voulez que le texte de l'élément p soit en rouge, vous noterez :
p {color : #ff0000 ;}
Ou bien, vous pouvez utiliser la notation hexadécimale abrégée pour arriver au même résultat :
p {color : #f00 ; }
Notation RGB
Qu'est-ce que la notation RGB ?
Vous pouvez également spécifier une couleur à l'aide de valeurs décimales comprises entre 0 et 255. Nous parlons de notation décimale, ou de notation RGB.
Je tiens à préciser que le R de RGB signifie 'red', le G signifie 'green', et le B signifie 'blue'.
- La première valeur spécifiera les composantes rouges de la couleur désirée
- la seconde valeur spécifiera les composantes vertes,
- et la troisième les composantes bleues.
Utiliser les valeurs RGB décimales
Si vous voulez que le texte de l'élément p soit en bleu, vous noterez :
p {color : rgb(0,0,255) ;}
- Pour utiliser cette notation, nous la signalons dans notre code en ajoutant rgb
- Ensuite, nous ouvrons les parenthèses ( ), et ajoutons les valeurs décimales.
- Enfin, il ne faut pas oublier de séparer ces valeurs par une virgule ,
Utiliser les pourcentages
Vous pouvez aussi utiliser les pourcentages pour spécifier les composantes rouges, vertes et bleues d'une couleur.
Par exemple, si vous voulez que le texte de l'élément p soit en bleu, vous noterez :
p {color : rgb(0%,0%,100%) ;}