Propriété CSS color
La propriété CSS color définit la couleur du contenu textuel et des décorations de texte. Essayez les exemples et visualisez les résultats.
La propriété CSS color définit la couleur de premier plan d'un élément — c'est-à-dire la couleur de son contenu textuel et de ses éventuelles décorations de texte (soulignements, surlignements, rayures). Elle n'affecte ni les arrière-plans, ni les bordures, ni les images ; pour cela, vous utilisez des propriétés dédiées comme background-color.
Cette page couvre la syntaxe de color, tous les formats de valeurs acceptés (couleurs nommées, hexadécimal, RGB/RGBA, HSL/HSLA), la façon dont color est hérité, et comment maintenir la lisibilité du texte. Vous pouvez parcourir les valeurs de couleurs web dans notre section HTML colors, consulter les mots-clés dans CSS color names, et choisir une teinte personnalisée avec notre outil Color Picker.
Parce que color est héritée, la définir sur un conteneur se propage à tout le texte des éléments descendants, sauf si un enfant la remplace — vous n'avez donc souvent besoin de la déclarer qu'une seule fois sur body. La valeur par défaut est currentcolor, un mot-clé qui se résout à la valeur color actuellement en vigueur, ce qui est pratique pour maintenir la synchronisation des bordures ou des remplissages SVG avec la couleur du texte.
| Valeur initiale | currentcolor |
|---|---|
| S'applique à | Tous les éléments. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | Oui. |
| Animable | Oui. La couleur est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.color = "#1c87c9"; |
Syntaxe
Syntaxe de la propriété CSS color
color: color | initial | inherit;Exemple de la propriété color :
Exemple de la propriété CSS color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Résultat
Vous pouvez utiliser des valeurs hexadécimales, RGB, HSL ou des noms de couleurs pour la propriété color. Remarque : la valeur initiale est currentcolor, ce qui signifie qu'elle hérite de la couleur du texte de son élément parent.
Exemple de la propriété color avec une valeur de couleur nommée :
Exemple de la propriété CSS color avec une valeur de couleur nommée
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with a named blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Exemple de la propriété color avec une valeur hexadécimale :
Exemple de la propriété CSS color avec une valeur hexadécimale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a hexadecimal color value (#8ebf42 for green).</p>
<p>This is some paragraph for example.</p>
</body>
</html>Exemple de la propriété color avec une valeur RGB :
Exemple de la propriété CSS color avec une valeur RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a RGB color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Exemple de la propriété color avec une valeur HSL :
Exemple de la propriété CSS color avec une valeur HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with an HSL color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Choisir un format de couleur
Les quatre formats ci-dessus peuvent tous décrire la même couleur — le choix dépend de la lisibilité et de ce que vous souhaitez contrôler :
- Couleurs nommées (
blue,tomato,rebeccapurple) sont les plus lisibles, mais limitées à une liste fixe de mots-clés. Idéales pour des prototypes rapides. - Hexadécimal (
#8ebf42) est le format le plus courant en production. Les trois paires représentent le rouge, le vert et le bleu en base 16. Un 4e ou 8e chiffre ajoute l'alpha :#8ebf4280correspond à environ 50 % d'opacité. - RGB (
rgb(142, 191, 66)) utilise les mêmes canaux que l'hexadécimal mais en décimal, ce qui est plus facile à lire et à générer par du code. - HSL (
hsl(89, 43%, 51%)) décrit la teinte (0–360°), la saturation et la luminosité. C'est le format le plus intuitif pour ajuster une couleur à la main — augmentez la luminosité pour un état de survol sans toucher à la teinte.
Transparence avec RGBA et HSLA
Ajoutez un canal alpha avec rgba() ou hsla() pour rendre le texte semi-transparent. L'alpha est un nombre allant de 0 (totalement transparent) à 1 (totalement opaque) :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.faded {
color: rgba(28, 135, 201, 0.5);
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p class="faded">This paragraph is 50% transparent blue.</p>
</body>
</html>Pour rendre transparent un élément entier (texte, bordures, arrière-plan et enfants ensemble) plutôt que seulement la couleur du texte, utilisez la propriété opacity.
Choisir une couleur de texte est également une décision d'accessibilité. Le texte et son arrière-plan doivent offrir un contraste suffisant pour les lecteurs malvoyants : les WCAG exigent un rapport de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. Du gris clair sur blanc peut paraître élégant mais échoue souvent à ce test.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| color | Définit la couleur du texte et des décorations de texte. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. | Essayer » |
| initial | Force la propriété à utiliser sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |