`Color` - Propriété CSS

color

Résumé des caractéristiques de la propriété `color`

Description rapide

Définit la couleur de l'avant plan et affecte une valeur à currentcolor.

Statut

Standard

Utilisable sur

HTML, SVG ⁽¹⁾

Valeurs prédéfinies

currentcolor | transparent

Pourcentages

Ne s'appliquent pas. Mais possible avec certaines fonctions.

Valeur initiale

currentcolor

Héritée par défaut

Oui.

Type d'animation

Computed value : lors d'une animation, la propriété color passe progressivement d'une valeur à une autre.

Ordre canonique

Single : valeur unique (l'ordre n'intervient pas).

Module W3C

Module CSS - Couleurs

Références (W3C)

🡇

🡅

CSS Color Module Level 5

Statut du document: WD (document de travail)

CSS Color Module Level 4

Statut du document: WD (document de travail)

CSS Color Module Level 3

Statut du document: REC (recommandation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Cascading Style Sheets specification - Version 1

Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

(1) En SVG la propriété color définit la valeur de currentColor, mais la couleur est appliquée par les propriétés ou les attributs stroke, fill, stroke-color ou fill-color.

Schéma syntaxique de `color`.

Schéma syntaxique de la propriété color.
Les liens du schéma donnent accès à plus de détails.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

#xxxxxx est le code hexadécimal d'une couleur (3, 6 ou 8 digits).
name est le nom standardisé d'une couleur. Voir Nuancier.
color est une couleur décrite avec l'une des fonctions : rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

Description de la propriété `color`.

color définit la couleur du texte et des décorations éventuelles (souligné, bordures, etc.). Elle définit aussi la valeur currentColor qui pourra servir pour initialiser d'autres propriétés. Notez que les décorations peuvent avoir reçu une couleur différente par leur propriété respective.

Les couleurs définies par la propriété color sont par défaut opaques, mais il est tout à fait possible de préciser un degré de transparence en utilisant un code hexadécimal à 8 digits ou l'une des fonction rgba(), hsla(), etc.

CSS utilise par défaut l'espace de couleurs sRGB, qui est peu étendu mais présente l'avantage d'être reconnu par tous les périphériques (écrans, imprimantes...). Il est possible cependant de travailler dans un autre espace de couleurs grâce à la fonction color().

Valeurs pour `color`.

color: currentcolor;

currentcolor est la valeur initiale, celle qui, sans indication contraire, est utilisée pour afficher le texte, les bordures, etc. Utiliser cette valeur avec color n'est utile que pour annuler un précédent changement de couleur.

color:currentColor;
color: #807418;

Le caractère dièse ( # ) permet de spécifier une couleur par son code hexadécimal. Celui-ci peut être sur 3 ou 6 digits, ou même 8 s'il est nécessaire d'indiquer une opacité différente de 1.

Les codes à 3 digits sont peu employés : #42E est équivalent à #4422EE. C'est donc un sous-ensemble du jeu de couleurs complet puisqu'on ne peut représenter que certaines couleurs.

color:#ff0000;
(rouge)

color:#00ff00;
(vert)

color:#0000ff;
(bleu)
color: lavender;

De très nombreuses couleurs ont reçu un nom standardisé. Celui-ci doit être inscrit sans guillemets ni apostrophes.
Pour avoir la liste des noms de couleurs, consultez Nuancier de ce site.

color:cyan;

color:Gray;

color:gold;
color: hsl(223deg 52% 30%);

La couleur peut également être spécifiée avec l'une des nombreuses fonctions reconnues par CSS : rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

color:hsl(45deg 50% 30%);

color:lab(67% -8.6912 -41.601);
color: color(mon-profil 0.3104 0.7421 0.2814);

Cette notation, utilisant la fonction color(), permet de spécifier une couleur dans un autre espace de couleurs que celui par défaut, qui est sRGB.

Le profil, ici dénommé mon-profil, peut être un profil colorimétrique prédéfini, ou un profil personnalisé, défini avec la directive @color-profile.

Plus d'informations et d'exemples sur la fonction color() et sur la directive @color-profile.

color:color(srgb 0.2 0.5 0.3);

color:color(a98-rgb 0.2 0.5 0.3);
color: initial; (currentcolor) color: inherit; color: revert; color: revertLayer; color: unset;

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Exemples avec la propriété `color`.

Voici plusieurs syntaxes définissant toutes la couleur du texte à bleue. Dans les deux derniers exemples, on a précisé une semi-transparence.

color:blue;
La couleur est désignée par son nom. Près de 150 couleurs ont reçu un nom standardisé. Ces noms sont maintenant reconnus par tous les navigateurs

color:#0000ff.
La couleur est ici désignée par son code hexadécimal sur 6 digits (2 pour le rouge, 2 pour le vert et 2 pour le bleu. Cette notation donne accès aux 16 millions de couleurs disponibles.

color:rgb(0,0,255);
Pour ceux qui ont l'hexadécimal en horreur, la fonction rgb() désigne une couleur à partir de 3 valeurs décimales (de 0 à 255).

color:#0000ff80;
Un code hexadécimal sur 8 digits permets d'introduire la notion de transparence partielle de la couleur. Les deux derniers digits indique cette transparence :
00 pour une couleur entièrement transparente (les autres digits sont donc sans importance) ; FF pour une couleur totalement opaque.
Toute valeur entre ces deux extrêmes indique une couleur partiellement transparente.

color:rgba(0 0 255 / 0.5);
La transparence de la couleur peut être spécifiée avec la fonction rgba(), le dernier paramètre 'introduit par le caractère /) étant un nombre compris entre 0 (transparence totale) et 1 (opacité totale).

Animation de la propriété `color`.

Dans la mesure ou chaque couleur est associée à un code numérique, l'animation des couleurs est possible. Dans le cas où une couleur est définie par son nom, l'animation se fait d'après le code numérique correspondant.

Animation d'une couleur nommée à une autre.

Animation sur la luminosité de la couleur.

Animation de la teinte de la couleur.

Il y a une petite subtilité dans le troisième exemple. On souhaite que l'animation parcourt toutes les couleurs de 0deg à 360deg (notation HSL), c'est à dire que toute la roue des couleurs soit parcourue dans le sens horaire. Cependant si on ne précise que la valeur de départ et la valeur finale, le système va au plus court en tournant dans le sens anti-horaire.
La solution est de décomposer l'animation en étapes pour forcer le navigateur à employer le chemin souhaité.
Mais ce problème semble maintenant résolu.

Ce que l'on veut faire

Ce que risque de faire le navigateur

Ce qu'il faut faire

Manipulation de la propriété `color` par programme.

Modifier la couleur avec Javascript.

Voici comment modifier avec Javascript la valeur de color pour un élément identifié par son id.
Deux syntaxes sont possibles.


	let el = document.getElementById('id');
	el.style['color'] = '#ff485080';
	// ou
	let el = document.getElementById('id');
	el.style.color = '#ff485080';

Lire la couleur avec Javascript.

Pour que ce code fonctionne, la propriété doit être affectée directement à l'élément lui-même et pas à une classe. La couleur est renvoyée sous son nom s'il s'agit d'une couleur nommée, ou sous la forme rgb(r,g,b) ou rgba(r,g,b,a) si elle a été définie autrement que par son nom (code hexadécimal, notation HSL, etc...).


	let el = document.getElementById('id');
	let value = el.style['color'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.color;

Lire la valeur calculée de `color`.

Voici comment lire avec Javascript la valeur calculée de color. Quelque soit la syntaxe utilisée pour la définir, la couleur est retournée sous la forme rgb(r,g,b), ou rgba(r,g,b,a) si l'opacité n'est pas totale. Sauf en ce qui concerne les fonctions lab(), lch() et color(), qui sont conservées.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('color');

Utiliser JQuery pour interagir avec la couleur.

Voici les codes JQuery pour modifier la valeur de la propriété color ou relire la valeur calculée de cette propriété. La couleur est retournée majoritairement, comme en Javascript, sous la forme rgb(r,g,b) ou rgba(r,g,b,a) , mais peut aussi faire apparaître les fonctions lab(), lch() ou color().


 $('#id').css('color', '#ff485080');


	let value = $('#id').css('color');

Testez vous-même.

Les boutons ci-dessous applique la couleur que vous avez saisie, et relisent la valeur calculée qui en résulte.

Simulateur avec la propriété `color`.

color :

currentcolor

transparent

Résultat

Prise en charge de `color` par les navigateurs.

La propriété color ne pose aucun problème de compatibilité avec les navigateurs actuels.

Colonne 1

Prise en charge de la propriété color pour définir la couleur de l'avant-plan. Les différentes notations pour spécifier la couleur peuvent ne pas être toutes reconnues.

Propriété
color

Estimation de la prise en charge globale.

98%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `color`.

CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

Définition initiale de la propriété color, acceptant la notation rgb(), les codes hexadécimaux et 16 couleurs nommées : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

17 Novembre 1995
Document de travail.
12 Novembre 1996
Proposé à la recommandation.
17 Décembre 1996
Recommandation.
13 Septembre 2018
Ancienne spécification, déclarée obsolète.
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

Ajout de la couleur nommée orange.
La propriété color accepte la valeur inherit.

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Couleurs - Niveau 3

Ajout des couleurs transparent et currentcolor.
Prise en charge de la notation HSL.
Ajout de nouvelles couleurs nommées.

23 Juin 1999
Document de travail.
14 Mai 2003
Candidat à la recommandation.
28 Octobre 2010
Proposé à la recommandation.
07 Juin 2011
Recommandation.
Module CSS - Couleurs - Niveau 4

Ajout de nouvelles notations pour spécifier une couleur : hwb(), hwba(), lab(), lch(), oklab(), oklch(), color().

05 Juillet 2016
Document de travail.
05 Juillet 2022
Candidat à la recommandation.
Module CSS - Couleurs - Niveau 5

Pas de modifications concernant directement la propriété color, mais des modifications concernant la gestion des couleurs, comme les espaces colorimétriques en particulier.

03 Mars 2020
Document de travail.

Voir aussi, à propos des couleurs.

La gestion des couleurs est une branche de CSS qui devient de plus en plus riche. Le module CSS Color Module regroupe toutes les définitions en rapport avec les couleurs.