CSS Couleurs


Couleurs CSS

En CSS, les couleurs sont spécifiées en utilisant un nom de couleur prédéfini ou avec une valeur RGB, HEX, HSL, RGBA, HSLA.


Noms de Couleurs CSS

En CSS, une couleur peut être spécifiée en utilisant un nom de couleur prédéfini :

Tomate
Orange
DodgerBlue
MediumSeaGreen
Gris
SlateBlue
Violet
Gris clair

Essayez-le vous-même »

CSS/HTML prend en charge 140 noms de couleurs standard .


Couleur de Fond CSS

Vous pouvez définir la couleur de fond pour les éléments HTML :

Bonjour le Monde

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Exemple

<h1 style="background-color:DodgerBlue;">Bonjour le Monde</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Essayez-le vous-même »

Couleur du Texte CSS

Vous pouvez définir la couleur du texte :

Bonjour le Monde

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Exemple

<h1 style="color:Tomato;">Bonjour le Monde</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Essayez-le vous-même »


Couleur de Bordure CSS

Vous pouvez définir la couleur des bordures :

Bonjour le Monde

Bonjour le Monde

Bonjour le Monde

Exemple

<h1 style="border:2px solid Tomato;">Bonjour le Monde</h1>
<h1 style="border:2px solid DodgerBlue;">Bonjour le Monde</h1>
<h1 style="border:2px solid Violet;">Bonjour le Monde</h1>
Essayez-le vous-même »

Valeurs de Couleur CSS

En CSS, les couleurs peuvent également être spécifiées en utilisant des valeurs RGB, HEX, HSL, RGBA et HSLA :

Identique au nom de couleur "Tomate" :

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Identique au nom de couleur "Tomate", mais 50 % transparent :

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Exemple

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Essayez-le vous-même »

En savoir plus sur les Valeurs de Couleur

Vous en apprendrez plus sur RGB , HEX et HSL dans les chapitres suivants.



Vidéo : Introduction aux Couleurs CSS