color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété color définit la couleur de premier plan d'un élément texte et de ses éventuelles décorations. Elle définit également la valeur de currentColor qui peut être utilisée pour d'autres propriétés (par exemple comme valeur par défaut pour border-color).

Exemple interactif

La valeur de cette propriété doit être une couleur uniforme. Celle-ci peut contenir des informations de transparences à partir de CSS3 mais ce ne doit pas être un dégradé (<gradient>) car en CSS un dégradé est considéré comme une image (type <image>) et pas comme une couleur.

Syntaxe

css
/* Valeurs avec un mot-clé */
color: currentcolor;

/* Valeurs avec un mot-clé pour une couleur nommée */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* Valeurs hexadécimales <hex-color> */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* Valeurs utilisant la fonction <rgb()> */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/* Valeurs <hsl()> */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* Valeurs globales */
color: inherit;
color: initial;
color: unset;

La propriété color est définie grâce à une valeur de type <color>.

Valeurs

<color>

Une valeur de type <color> qui fournit la couleur pour les éléments textuels de l'élément.

Définition formelle

Valeur initialecanvastext
Applicabilitéall elements and text. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Valeur calculéecouleur calculée
Type d'animationby computed value type

Syntaxe formelle

color = 
  <color>

Exemples

CSS

css
.exemple {
  color: rgb(0, 0, 255);
  /* équivalent à
  color: blue;
  color: #0000ff;
  color: #00f;
  color: hsl(0, 100%, 50%); */
}

.confiture {
  color: orange;
  /* on pourrait aussi utiliser
  color: rgb(255, 128, 0); */
}

HTML

html
<p class="exemple">
  En passant elle prit sur un rayon un pot de confiture portant cette étiquette,
  <span class="confiture"> «&nbsp;MARMELADE D’ORANGES.&nbsp;» </span>
  Mais, à son grand regret, le pot était vide&nbsp;: elle n’osait le laisser
  tomber dans la crainte de tuer quelqu’un&nbsp;; aussi s’arrangea-t-elle de
  manière à le déposer en passant dans une des armoires.
</p>

Résultat

Accessibilité

Il est important de vérifier le contraste entre la couleur utilisée pour le texte et celle utilisée pour l'arrière-plan afin que les personnes ayant une vision faible ou lisant le document dans de mauvaises conditions puissent correctement lire le document.

Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Afin de respecter les règles d'accessibilité (WCAG), on doit avoir un ratio de 4.5:1 pour les textes « normaux » et un ratio de 3:1 pour les textes plus grands comme les titres (un texte est considéré comme « grand » s'il est en gras et qu'une lettre mesure plus de 18.66 px ou bien si une lettre mesure plus de 24 pixels).

Spécifications

Specification
CSS Color Module Level 4
# the-color-property

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi