La propriété color permet de paramétrer la couleur de premier plan d'un élément texte et de ses éventuelles décorations. Il définit également la valeur <currentcolor> qui peut être utilisée indirectement pour d'autres propriétés. La valeur de cette propriété sera la valeur par défaut pour d'autres propriétés de couleur comme border-color.

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.

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).
Type d'animationune couleur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeurs avec un mot-clé */
color: currentcolor;
/* On utilise la couleur de l'ancêtre direct de l'élément */

/* Valeurs avec un mot-clé pour une couleur nommée */
color: red; /* CSS Level 1 */
color: orange; /* CSS Level 2 (Revision 1) */
color: tan; /* CSS Color Level 3 (aussi appelées couleurs SVG ou X11) */
color: rebeccapurple; /* CSS Color Level 4 */

/* Valeurs hexadécimales <hex-color> */
color: #0f0;
color: #00ff00;
color: #0f0a;
color: #00ff0080;

/* Valeurs utilisant la fonction <rgb()> */
color: rgb(34, 12, 64, 0.3); /* Notation historique avec une valeur alpha */
color: rgba(34, 12, 64, 0.3);/* Notation historique avec les virgules */
color: rgb(34 12 64 / 0.3);  /* Notation fonctionnelle avec les espaces */
color: rgba(34 12 64 / 0.3); /* Notation fonctionnelle avec les espaces */
                             /* synonyme de rgb() */

/* <hsl()> values */
color: hsl(30, 100%, 50%, 0.3); /* Notation historique avec une valeur alpha */
color: hsla(30, 100%, 50%, 0.3);/* Notation historique avec les virgules */
color: hsl(30 100% 50% / 0.3);  /* Notation fonctionnelle avec les espaces */
color: hsla(30 100% 50% / 0.3); /* Notation fonctionnelle avec les espaces */
                                /* synonyme de hsl() */

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

Valeurs

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

Formal syntax

<color>


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


<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<named-color> = transparent | aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen
<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


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

CSS

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

.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 Color Module Level 4
La définition de 'color' dans cette spécification.
Brouillon de l'éditeur Ajout de la syntaxe sans virgule pour les fonctions rgb(), rgba(), hsl() et hsla() Une valeur alpha peut être utilisée dans rgb() et hsl(), rgba() et hsla() sont donc des synonymes (dépréciés) de ces fonctions. Ajout de la couleur rebeccapurple.
Ajout des valeurs hexadécimales sur 4 et 8 chiffres où le dernier chiffre indique la composante alpha.
Ajout des fonctions hwb(), device-cmyk() et color().
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 fonctions rgba(), hsl() et hsla().
CSS Level 2 (Revision 1)
La définition de 'color' dans cette spécification.
Recommendation Ajout de la couleur 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 Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 ? 1.0 (1.7 ou moins) 3.0 3.5 1.0
Fonctionnalité Android Edge 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,