Propriété CSS color

❮ Précédent Suivant ❯

La propriété color décrit la couleur du contenu de texte et des décorations de texte. Vous pouvez trouver les couleurs web à notre section Les couleurs HTML essayer de choisir votre couleur préféré avec notre outil Pipette de couleur. La valeur initiale de cette propriété varie d'un navigateur à l'autre.

Valeur initiale	Varie d'un navigateur à l'autre.
Appliquée à	Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée	Oui.
Animable	Oui. La couleur est animable.
Version	CSS1
Syntaxe DOM	object.style.color = "#1c87c9";

Syntaxe

color: color | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .blue {
      color: #1c87c9;
      }                
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété color</h2>
    <p>Quelque paragraphe.</p>
    <p class="blue">Quelque paragraphe de couleur bleu.</p>
    <p>Quelque paragraphe.</p>
  </body>
</html>

Essayez-vous-même!

On peut définir hexadecimal, RGB, RGBA, HSL, HSLA ou les noms des couleurs en tant qu'une valeur pour la propriété color.

Voyez l'exemple de la propriété CSS couleur, où la valeur est un nom de couleur:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .blue {
      color: blue;
      }                
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété</h2>
    <p>Quelque paragraphe.</p>
    <p class="blue">Quelque paragraphe avec une couleur bleu nommée.</p>
    <p>Quelque paragraphe.</p>
  </body>
</html>

Essayez-vous-même!

Voici un exemple avec une valeur hexadecimale définie pour la propriété color:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .color {
      color: #8ebf42;
      }                
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété color.</h2>
    <p>Quelque paragraphe</p>
    <p class="color">Quelque paragraphe avec une valeur hexadecimale (#8ebf42 for green).</p>
    <p>Quelque paragraphe.</p>
  </body>
</html>

Essayez-vous-même!

Voici un exemple avec la propriété color en utilisant une valeur RGB:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .color {
      color: rgb(142, 191, 66);
      }                
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété color.</h2>
    <p>Quelque paragraphe</p>
    <p class="color">Quelque paragraphe avec une valeur de couleur RGB.</p>
    <p>Quelque paragraphe.</p>
  </body>
</html>

Essayez-vous-même!

Voici un exemple de la propriété couleur avec une valeur HSL:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .color{
      color: hsl(89, 43%, 51%);
      }                
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété color.</h2>
    <p>Quelque paragraphe</p>
    <p class="color">Quelque paragraphe avec une valeur de couleur HSL.</p>
    <p>Quelque paragraphe.</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
color	Décrit la couleur de texte et des décoration de texte. Noms des couleurs, codes hexadecimaux des couleurs, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.