FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

Cours 2.6. Les couleurs en CSS

Propriétés

Le CSS offre deux propriétés qui peuvent s'appliquer à tous les éléments HTML :

L'exemple ci-dessous affiche le texte en blanc sur fond bleu :

/* Style des balises <p> */
/* Style des balises <p> */
p {
    color: white;
    background-color: blue;
}

Le style ci-dessus affiche le résultat suivant dans le navigateur :

Les couleurs peuvent être définie de plusieurs manières différentes :

Vous trouverez sur cette page une liste complète des 148 noms de couleurs standards.

Couleurs RGB en héxadécimal

Si vous souhaitez utiliser une couleur personalisée, il est possible de définir cette couleur par sa déclaration RGB en hexadécimal précédée du symbole # :

.rouge { color: #ff0000; }
.vert  { color: #00ff00; }
.bleu  { color: #0000ff; }
.jaune { color: #ffff00; }
.rose  { color: #ff00ff; }

Le style ci-dessus affiche le résultat suivant dans le navigateur :

Couleurs RGB en décimal

La syntaxe rgb(red, green, blue) permet de définit les trois composantes RGB de la couleur entre 0 et 255 inclus. L'exemple ci-dessus deviendrait :

.rouge { color: rgb(255, 0, 0); }
.vert  { color: rgb(0, 255, 0); }
.bleu  { color: rgb(0, 0, 255); }
.jaune { color: rgb(255, 255, 0); }
.rose  { color: rgb(255, 0, 255); }

Le résultat dans le navigateur est le même que précédemment :

Couleurs RGB avec transparence

La syntaxe rgba(red, green, blue, alpha) est similaire à la précédente, mais comporte un paramètre supplémentaire (alpha) qui représente la transparence comprise entre 0 et 1 inclus. Par exemple :

#pourcent0    { background-color: rgba(0, 255, 0, 0); }
#pourcent25   { background-color: rgba(0, 255, 0, 0.25); }
#pourcent50   { background-color: rgba(0, 255, 0, 0.5); }
#pourcent75   { background-color: rgba(0, 255, 0, 0.75); }
#pourcent100  { background-color: rgba(0, 255, 0, 1); }

Voici le rendu dans le navigateur :

Il est aussi possible de définir la transparence en pourcentage :

#pourcent0    { background-color: rgba(0, 255, 0, 0%); }
#pourcent25   { background-color: rgba(0, 255, 0, 25%); }
#pourcent50   { background-color: rgba(0, 255, 0, 50%); }
#pourcent75   { background-color: rgba(0, 255, 0, 75%); }
#pourcent100  { background-color: rgba(0, 255, 0, 100%); }

Teinte, saturation et luminosité

La déclaration en teinte saturation luminosité (HSL de l'anglais Hue Saturation Lightness) est moins courante, mais il est toutefois utile d'en connaître la syntaxe :

Voir aussi


Dernière mise à jour : 28/11/2019