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 initialeVarie d'un navigateur à l'autre
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Médiavisuel
Valeur calculéesi 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).
Animableoui, comme une couleur
Ordre canoniquel'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>


<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>


<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


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

Compatibilité des navigateurs

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

Étiquettes et contributeurs liés au document

Étiquettes : 
 Dernière mise à jour par : SphinxKnight,