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> */
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 :

Exercice

Considérons le HTML suivant:

<h1>CSS selectors</h1>

<p>This paragraph must be red</p>
<p>This paragraph must be red</p>
<p class="bg-green">This paragraph must be white with a green background</p>

The t-shirt must have a yellow background:<br>
<svg width="240" height="240" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M 663 104C 663 104 925 270 925 270C 943 282 950 306 940 325C 940 325 856 494 856 494C 845 516 817 524 796 512C 796 512 755 487 755 487C 741 479 726 487 726 503C 726 503 729 880 729 880C 729 904 710 923 687 923C 687 923 323 924 323 924C 300 924 281 905 280 882C 280 882 276 502 276 502C 276 486 261 478 247 486C 247 486 204 512 204 512C 183 524 155 516 144 494C 144 494 60 325 60 325C 50 306 57 282 75 270C 75 270 337 104 337 104C 345 98 357 99 365 105C 412 140 456 156 500 156C 544 156 588 140 635 105C 639 102 644 100 649 100C 654 100 659 101 663 104C 663 104 663 104 663 104"/></svg>

Sans modifier le HTML, ajoutez des styles CSS afin de

Voir aussi


Dernière mise à jour : 22/01/2020