Couleurs CSS

Les couleurs sont spécifiées en utilisant des noms de couleurs prédéfinis, ou des valeurs RGB, HEX, HSL, RGBA, HSLA.

Noms de couleurs CSS

En CSS, vous pouvez utiliser des noms de couleurs pour spécifier des couleurs :

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Essayez-le vous-même

Supporté par CSS/HTML 140 noms de couleurs standards.

Couleur de fond CSS

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

Bienvenue en Chine
La Chine est un grand pays !

Exemple

<h1 style="background-color:DodgerBlue;">Chine</h1>
<p style="background-color:Tomato;">La Chine est un grand pays !</p>

Essayez-le vous-même

Couleur de texte CSS

Vous pouvez définir la couleur du texte :

Chine

La Chine est un grand pays !

La Chine, officiellement la République populaire de Chine, est un pays de l'Asie de l'Est.

Exemple

<h1 style="color:Tomato;">Chine</h1>
<p style="color:DodgerBlue;">La Chine est un grand pays !</p>
<p style="color:MediumSeaGreen;">La Chine, officiellement la République populaire de Chine...</p>

Essayez-le vous-même

Couleur de bordure CSS

Vous pouvez définir la couleur de la bordure :

Hello World
Hello World
Hello World

Exemple

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Essayez-le vous-même

Valeurs de couleur CSS

Dans CSS, vous pouvez également utiliser les valeurs RGB, HEX, HSL, RGBA ou HSLA pour spécifier une couleur :

Équivalent à la couleur "Tomato" :

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

Équivalent à la couleur "Tomato", mais avec une transparence de 50% :

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h3>Exemple</h3> 
<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

Dans le prochain chapitre, vous apprendrez à propos de RGB、HEX et HSL Pour en savoir plus.