color

La propriété color permet de définir la couleur de premier plan pour le texte d'un élément et ses décorations. Cette propriété n'affecte aucune autre caractéristique de l'élément et aurait dû être appelée text-color si ce n'est pour des raisons historiques liées à CSS Level 1.

La valeur de couleur est uniforme et peut inclure une composante de transparence depuis CSS3. Une couleur ne peut pas être un gradient (type <gradient>) car, selon CSS, un gradient est une image (type <image>).

Valeur initiale	Varie d'un navigateur à l'autre
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Média	visuel
Valeur calculée	si la valeur est translucide, la valeur calculée est la fonction `rgba()`correspondante. Sinon, la fonction `rgb()`correspondante. Le mot-clé `transparent` devient `rgb(0,0,0)`.
Animable	oui, comme une couleur
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeurs avec mot-clé */
color: red;
color: orange;
color: antiquewhite;

/* Une couleur notée avec */
/* 3 caractères et # */
color: #0f0;

/* Une couleur notée en          */
/* hexadécimal avec 6 caractères */
/* et #                          */
color: #00ff00;

/* Une couleur construite avec */
/* la notation fonctionnelle   */
color: rgba( 34, 12, 64, 0.3);

/* Un mot-clé pour utiliser la  */
/* couleur de l'ancêtre courant */
color: currentcolor;

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

Valeurs

<color>: Une valeur de couleur (type <color> qui fournit la couleur pour le contenu textuel de l'élément.

Syntaxe formelle

<color>où 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
où 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Exemples

CSS

.exemple {
  color: rgb(0, 0, 255);
  /* équivalent à
  color: blue;
  color: #0000ff; */
}

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

HTML

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

Résultat

Spécifications

Spécification	État	Commentaires
CSS Transitions La définition de 'color' dans cette spécification.	Version de travail	`color` peut désormais être animée.
CSS Color Module Level 3 La définition de 'color' dans cette spécification.	Recommendation	Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des notations fonctionnelles `rgba()`, `hsl()`, `hsla()`.
CSS Level 2 (Revision 1) La définition de 'color' dans cette spécification.	Recommendation	Ajout de la valeur `orange` et des couleurs système.
CSS Level 1 La définition de 'color' dans cette spécification.	Recommendation	Définition initiale.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Support simple	1.0	1.0 (1.7 ou moins)	3.0	3.5	1.0

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple	1.0	1.0 (1)	6.0	6.0	1.0

Voir aussi

Le type <color>