Propriété CSS color

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>
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>

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>

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>

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>

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.

Support de Navigateurs

1.0+ 12.0+ 1.0+


Trouvez-vous cela utile?

Articles Associées