Tutoriel sur les couleurs
Les couleurs sont affichées en combinant la lumière ROUGE (RED), VERT (GREEN) et BLEU (BLUE).
Noms des couleurs
Avec CSS, les couleurs peuvent être définies à l’aide de noms de couleurs :
Valeurs de couleur CSS
Avec CSS, les couleurs peuvent être spécifiées de différentes manières :
- Par noms de couleurs
- En tant que valeurs RVB
- Sous forme de valeurs hexadécimales
- Sous forme de valeurs HSL (CSS3)
- En tant que valeurs HWB (CSS4)
- Avec le mot-clé
currentcolor
Couleurs RVB
Les valeurs de couleur RVB sont prises en charge dans tous les navigateurs.
Une valeur de couleur RVB est spécifiée avec : rgb( RED , GREEN , BLUE ).
Chaque paramètre définit l’intensité de la couleur sous la forme d’un entier compris entre 0 et 255.
Par exemple, rgb(0,0,255) est rendu en bleu, car le paramètre blue est défini sur sa valeur la plus élevée (255) et les autres sont définis sur 0.
Les nuances de gris sont souvent définies à l’aide de valeurs égales pour les 3 sources lumineuses :
Exemple
| couleur | RGB | couleur |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
Couleurs hexadécimales
Les valeurs de couleur hexadécimales sont également prises en charge dans tous les navigateurs.
Une couleur hexadécimale est spécifiée avec : #RRGGBB.
RR (rouge), GG (vert) et BB (bleu) sont des entiers hexadécimaux compris entre 00 et FF spécifiant l'intensité de la couleur.
Par exemple, #0000FF s'affiche en bleu, car le composant bleu est défini sur sa valeur la plus élevée (FF) et les autres sont définis sur 00.
Exemple
| couleur | HEX | RGB | couleur |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
Les nuances de gris sont souvent définies à l’aide de valeurs égales pour les 3 sources lumineuses :
Exemple
| couleur | HEX | RGB | couleur |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
Majuscule ou minuscule ?
Vous pouvez utiliser des lettres majuscules ou minuscules pour spécifier des valeurs hexadécimales.
Les minuscules sont plus faciles à écrire. Les majuscules sont plus faciles à lire.
Noms des couleurs
CSS prend en charge 140 noms de couleurs standard.
Dans le chapitre suivant, vous trouverez une liste alphabétique complète des noms de couleurs avec des valeurs hexadécimales :
| Nom de la couleur | Hex | couleur |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
Le mot-clé currentcolor
Le mot-clé currentcolor fait référence à la valeur de la propriété color d’un élément.
Exemple
La couleur de bordure de l'élément <div> suivant sera bleue, car la couleur du texte de l'élément <div> est bleue :
#myDIV {
color: blue; /* Couleur bleue du texte */
border: 10px solid currentcolor; /* Couleur de la bordure bleue */
}
Try it Yourself »
