color - Propriété CSS
Résumé des caractéristiques de la propriété color
currentcolor | transparentcurrentcolorcolor passe progressivement d'une valeur à une autre.
(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.
colorLes 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 :
#xxxxxxest le code hexadécimal d'une couleur (3, 6 ou 8 digits).nameest le nom standardisé d'une couleur. Voir le nuancier de couleurs.colorest une couleur décrite avec l'une des fonctions : Object.
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(), hwba(), 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 directive @color-profile.
Syntaxes pour color.
- color: currentcolor;
currentcolorest la valeur par défaut, celle qui, sans indication contraire, est utilisée pour afficher le texte, les bordures, etc. Utiliser cette valeur aveccolorn'est utile que pour annuler un précédent changement de couleur. - 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. - 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 le nuancier de couleurs de ce site - color: hsl(223deg 52% 30%);
La couleur peut également être spécifiée avec l'une des nombreuses fonctions reconnues par CSS :
rgb(),hsl(),hwb(),lab(),lch(),color(). - 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.Attention ! la fonction
color()présente encore des problèmes de compatibilité avec certains navigateurs (2023). La valeur initiale est :
currentcolor
Exemples.
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 étant un nombre compris entre 0 (transparence totale) et 1 (opacité totale).
Animation sur les couleurs.
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
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 tourant
dans le sens anti-horaire.
La solution est de décomposer l'animation en étapes pour forcer le navigateur à employer le chemin souhaité.
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 valeur de la propriété color 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';
let el = document.getElementById('id');
el.style.color = '#ff485080';
Lire avec Javascript la valeur de la propriété color.
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'];
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.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('color');
Utiliser JQuery pour interagir avec la propriété color.
Voici les codes JQuery pour modifier la valeur de la propriété color ou relire la valeur calculée de cette propriété.
Comme en Javascript, la couleur est retournée sous la forme rgb(r,g,b) si la couleur est totalement opaque, ou rgba(r,g,b,a)
si la couleur a un peu de transparence.
$('#id').css('color', '#ff485080');
let value = $('#id').css('color');
Testez vous-même.
Le bouton Test ci-dessous applique la couleur que vous avez saisie, et relit la valeur calculée qui en résulte.
Simulateur.
Compatibilité des navigateurs.
La propriété color ne pose aucun problème de compatibilité avec les navigateurs actuels.
colorNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que color.
Les spécifications CSS éditées par le W3C sont organisées en modules. color fait partie du Module CSS - Couleurs (CSS Color Module). Les définitions suivantes sont également décrites dans ce même module.
Propriétés.
Fonctions.
sRGB.L*a*b*.L*C*H*.L*a*b* avec une correction perceptive.L*C*H* avec une correction perceptive.Directives.
color().