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

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

/* 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.0 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.0 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.

Formal syntax

<color>


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


<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )


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

Exemples

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

<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

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

Spécification État Commentaires
CSS Color Module Level 4
La définition de 'color' dans cette spécification.
Version de travail 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.
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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
colorChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 3Opera Support complet OuiSafari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
Alpha color values (rgba(), hsla())Chrome Support complet 1Edge Support complet 12Firefox Support complet 3IE Support complet 9Opera Support complet 10Safari Support complet 3.1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 2Samsung Internet Android Support complet Oui
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)Chrome Support complet 62
Support complet 62
Support complet 52
Désactivée
Désactivée From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Aucun support NonFirefox Support complet 49IE Aucun support NonOpera Support complet 49
Support complet 49
Support complet 39
Désactivée
Désactivée From version 39: this feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 9.1WebView Android Support complet 62
Support complet 62
Support complet 52
Désactivée
Désactivée From version 52: this feature is behind the Enable experimental Web Platform features preference.
Chrome Android Support complet 62
Support complet 62
Support complet 52
Désactivée
Désactivée From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Support complet 49Opera Android Support complet 47
Support complet 47
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Support complet 9.1Samsung Internet Android ?
currentcolorChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Support complet 9Opera Support complet 9.5Safari Support complet 4WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android ? Safari iOS Support complet 3.2Samsung Internet Android ?
Allow floats in rgb() and rgba()Chrome Support complet 66Edge Aucun support NonFirefox Support complet 52IE Aucun support NonOpera Support complet 53Safari Support complet 12.1WebView Android Support complet 66Chrome Android Support complet 66Firefox Android Support complet 52Opera Android Support complet 47Safari iOS Support complet 12.2Samsung Internet Android ?
HSL color values (hsl())Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 9Opera Support complet 9.5Safari Support complet 3.1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 2Samsung Internet Android Support complet Oui
Keyword color valuesChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 3
Notes
Support complet 3
Notes
Notes Internet Explorer 8 and later support gray color keywords spelled with an e (grey, darkgrey, darkslategrey, dimgrey, lightgrey, and lightslategrey). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (gray, darkgray, darkslategray, dimgray, lightgray, and lightslategray).
Opera Support complet 3.5Safari Support complet 1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet Oui
rebeccapurpleChrome Support complet 38Edge Support complet 12Firefox Support complet 33IE Support complet 11Opera Support complet 25Safari Support complet 9WebView Android Support complet 38Chrome Android Support complet 38Firefox Android Support complet 33Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet 3.0
RGB functional notation (rgb())Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet Oui
RGB hexadecimal notation (#RRGGBB, #RGB)Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 3Opera Support complet 3.5Safari Support complet 1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet Oui
Space-separated functional color notationsChrome Support complet 65Edge Aucun support NonFirefox Support complet 52IE Aucun support NonOpera Support complet 52Safari Support complet 12.1WebView Android Support complet 65Chrome Android Support complet 65Firefox Android Support complet 52Opera Android Support complet 47Safari iOS Support complet 12.2Samsung Internet Android ?
transparentChrome Support complet 1Edge Support complet 12Firefox Support complet 3IE Support complet 9Opera Support complet 10Safari Support complet 3.1WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android ? Safari iOS Support complet 2Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

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