HTML Couleurs


Les couleurs HTML sont spécifiées à l'aide de noms de couleurs prédéfinis ou de valeurs RGB, HEX, HSL, RGBA ou HSLA.


Noms de Couleurs

En HTML, une couleur peut être spécifiée en utilisant un nom de couleur :

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Essayez-le vous-même »

HTML prend en charge 140 noms de couleurs standard .


Couleur de Fond

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

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

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

En HTML, les couleurs peuvent également être spécifiées à l'aide de valeurs RGB, HEX, HSL, RGBA et HSLA.

Les trois éléments <div> suivants ont leur couleur de fond définie avec des valeurs RGB, HEX et HSL :

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

Les deux éléments <div> suivants ont leur couleur de fond définie avec des valeurs RGBA et HSLA, qui ajoutent un canal Alpha à la couleur (ici nous avons 50% de transparence) :

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 davantage sur RGB , HEX et HSL dans les chapitres suivants.


Vidéo : Couleurs HTML