Tutoriel sur les couleurs
Les couleurs sont affichées en combinant la lumière ROUGE, VERTE et BLEUE.
Noms des couleurs
Avec CSS, les couleurs peuvent être définies en utilisant des noms de couleurs :
Exemple
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
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
- En tant que valeurs hexadécimales
- En tant que valeurs HSL (CSS3)
- Comme valeurs HWB (CSS4)
- Avec le
currentcolormot clé
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 bleu est défini sur sa valeur la plus élevée (255) et les autres sont définis sur 0.
Exemple
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| rgb(0,0,255) | Blue |
Les nuances de gris sont souvent définies en utilisant des valeurs égales pour les 3 sources lumineuses :
Exemple
| Color | RGB | Color |
|---|---|---|
| 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 : # RR GG BB .
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 la composante bleue est définie sur sa valeur la plus élevée (FF) et les autres sont définies sur 00.
Exemple
| Color | HEX | RGB | Color |
|---|---|---|---|
| #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 en utilisant des valeurs égales pour les 3 sources lumineuses :
Exemple
| Color | HEX | RGB | Color |
|---|---|---|---|
| #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 :
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
Le mot-clé currentcolor
Le currentcolormot clé fait référence à la valeur de la propriété color d'un élément.
Exemple
La couleur de la bordure de l'élément <div> suivant sera bleue, car la couleur du texte de l'élément <div> est bleue :
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}