Valeurs de couleur légales CSS
Couleurs CSS
Les couleurs en CSS peuvent être spécifiées par les méthodes suivantes :
- Couleurs hexadécimales
- Couleurs hexadécimales avec transparence
- Couleurs RVB
- Couleurs RVBA
- Couleurs HSL
- Couleurs HSLA
- Noms de couleurs prédéfinis/inter-navigateurs
- Avec le
currentcolormot clé
Couleurs hexadécimales
Une couleur hexadécimale est spécifiée avec : #RRGGBB, où les entiers hexadécimaux RR (rouge), GG (vert) et BB (bleu) spécifient les composants de la couleur. Toutes les valeurs doivent être comprises entre 00 et FF.
Par exemple, la valeur #0000ff est rendue 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
Définissez différentes couleurs HEX :
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Couleurs hexadécimales avec transparence
Une couleur hexadécimale est spécifiée avec : #RRGGBB. Pour ajouter de la transparence, ajoutez deux chiffres supplémentaires entre 00 et FF.
Exemple
Définissez différentes couleurs HEX avec transparence :
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
Couleurs RVB
Une valeur de couleur RVB est spécifiée avec la fonction rgb() , qui a la syntaxe suivante :
rgb(red, green, blue)
Chaque paramètre (rouge, vert et bleu) définit l'intensité de la couleur et peut être un entier compris entre 0 et 255 ou une valeur en pourcentage (de 0 % à 100 %).
Par exemple, la valeur rgb(0,0,255) est rendue 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.
De plus, les valeurs suivantes définissent une couleur égale : rgb(0,0,255) et rgb(0%,0%,100%).
Exemple
Définissez différentes couleurs RVB :
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
Couleurs RVBA
Les valeurs de couleur RGBA sont une extension des valeurs de couleur RGB avec un canal alpha - qui spécifie l'opacité de l'objet.
Une couleur RGBA est spécifiée avec la fonction rgba() , qui a la syntaxe suivante :
rgba(red, green, blue, alpha)
Le paramètre alpha est un nombre compris entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque).
Exemple
Définissez différentes couleurs RVB avec opacité :
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
Couleurs HSL
HSL signifie teinte, saturation et luminosité - et représente une représentation cylindrique des couleurs.
Une valeur de couleur HSL est spécifiée avec la fonction hsl() , qui a la syntaxe suivante :
hsl(hue, saturation, lightness)
La teinte est un degré sur la roue chromatique (de 0 à 360) - 0 (ou 360) est rouge, 120 est vert, 240 est bleu. La saturation est une valeur en pourcentage ; 0 % signifie une nuance de gris et 100 % est la pleine couleur. La légèreté est aussi un pourcentage ; 0% est noir, 100% est blanc.
Exemple
Définissez différentes couleurs HSL :
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Couleurs HSLA
Les valeurs de couleur HSLA sont une extension des valeurs de couleur HSL avec un canal alpha - qui spécifie l'opacité de l'objet.
Une valeur de couleur HSLA est spécifiée avec la fonction hsla() , qui a la syntaxe suivante :
hsla(hue, saturation, lightness, alpha)
Le paramètre alpha est un nombre compris entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque).
Exemple
Définissez différentes couleurs HSL avec opacité :
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
Noms de couleurs prédéfinis/inter-navigateurs
140 noms de couleurs sont prédéfinis dans les spécifications de couleurs HTML et CSS.
Par exemple : blue, red, coral, brown, etc. :
Exemple
Définissez différents noms de couleur :
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
Une liste de tous les noms prédéfinis se trouve dans notre Référence des noms de couleurs .
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 */
}