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 composantes 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;} /* rouge */
#p2 {background-color: #00ff00;} /* vert */
#p3 {background-color: #0000ff;} /* bleu */
Essayez-le vous-même »
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;} /* transparence rouge */
#p2a {background-color: #00ff0080;} /* transparence verte */
#p3a {background-color: #0000ff80;} /* transparence bleue */
Essayez-le vous-même »
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 {couleur de fond : rgb(255, 0, 0);} /* rouge */
#p2 {couleur de fond : rgb(0, 255, 0);} /* vert */
#p3 {couleur de fond : rgb(0, 0, 255);} /* bleu */
Essayez-le vous-même »
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);} /* rouge avec opacité */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* vert avec opacité */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* bleu avec opacité */
Essayez-le vous-même »
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 {couleur de fond : hsl(120, 100 %, 50 %);} /* vert */
#p2 {background-color: hsl(120, 100%, 75%);} /* vert clair */
#p3 {couleur de fond : hsl(120, 100 %, 25 %);} /* vert foncé */
#p4 {background-color: hsl(120, 60%, 70%);} /* vert pastel */
Essayez-le vous-même »
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);} /* vert avec opacité */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* vert clair avec opacité */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* vert foncé avec opacité */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* vert pastel avec opacité */
Essayez-le vous-même »
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, brownetc:
Exemple
Définissez différents noms de couleur :
#p1 {couleur de fond : bleu ;}
#p2 {couleur de fond : rouge ;}
#p3 {couleur de fond : corail ;}
#p4 {couleur de fond : marron ;}
Essayez-le vous-même »
Le mot-clé currentcolor
Le currentcolor mot-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
#monDIV {
Couleur bleue; /* Couleur du texte bleu */
bordure : 10 pixels couleur actuelle solide ; /* Couleur de la bordure bleue */
}
Essayez-le vous-même »
#Valeurs #couleur #légales #CSS