Couleur
Définition : Nom de couleur
Les couleurs peuvent être définies à l'aide de mots-clés (blue, green, red...) selon les navigateurs la liste est plus ou moins longue.
color: fuchsia;
background-color : magenta;
border-color: lightgray;
background-color :
Définition : #, rgb et rgba
Les couleurs peuvent être définies à l'aide du système de coordonnées cubiques RGB. Soit avec # suivit de la notation hexadécimale ou à l'aide des fonctions rgb() et rgba().
Hexa :
#rrggbb[AA] les lettres pouvant prendre les valeurs (0-9, A-F). r :rouge, v : vert, b : bleu, A : composant alpha optionnel (opacité).
#rgb[A] identique au précédent, mais moins de combinaisons possibles.
color: #ff000088; // rouge avec opacité de 50%
color: #0f0; // vert
background-color :
rgb :
rgb(R, G, B, [A]) les lettres pouvant prendre les valeurs (0-255) ou (0%-100%). Le A optionnel est une valeur décimale entre 0 et 1 (0 opaque) ou (0%-100%)
Ecritures alternatives :
rgb(R G B [ / A])
rgba(R, G, B, A)
rgba(R G B / A)
color: rgb(255, 0, 0); // rouge
color: rgb(255, 0, 0, 0.5); // rouge avec opacité de 50%
color: rgb(100%, 0%, 0%, 50%); // rouge avec opacité de 50%
color: rgb(100% 0% 0% / 50%); // rouge avec opacité de 50%
color: rgba(100%, 0%, 0%, 50%); // rouge avec opacité de 50%
color: rgba(100 0% 0% / 50%); // rouge avec opacité de 50%
background-color :
Définition : hsl
Les trois paramètres des couleurs HSL sont :
La teinte (H) : correspond à l'angle sur le cercle chromatique (Rouge = 0°)
La saturation (S) : du centre du cercle vers l'extérieur (0% - 100%)
La luminosité (L) : 0% noir, 100% blanc
Un quatrième paramètre optionnel peut donner l'opacité.
color: hsl(0, 50%, 50%, 0.5);
S
L
background-color :