Grayscale() - Fonction CSS

Description de la fonction grayscale().

La fonction grayscale() atténue les couleurs d'un élément, en totalité ou partiellement. On obtient donc un élément restitué en nuances de gris, communément appelée "image en noir et blanc".

La fonction saturate() permet d'obtenir un effet comparable, mais avec quelques différences:

• Les valeurs sont inversées : saturate(0) est équivalent à grayscale(100%)
• saturate() peut agir dans les deux sens : atténuation ou renforcement des couleurs. Ce qui n'est pas le cas de grayscale() qui ne peut que atténuer les couleurs.
• Les formules de calcul utilisées par ces deux fonctions sont différentes.

La valeur grayscale() peut être utilisée avec les propriétés suivantes :

• backdrop-filter : Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.
• filter : Applique un filtre graphique (flou, contraste, luminosité...) à un élément.

Syntaxes de la fonction grayscale().

• filter: grayscale(50%); n

  n est un nombre sans unité compris entre 0 et 1, ou un pourcentage compris entre 0% et 100%. Cette valeur indique le taux de conversion en nuances de gris.
  0% ne change rien au visuel de l'élément, tandis que 1 ou 100% provoque une dé-saturation totale de son image (remplacement de toutes les couleurs par des nuances de gris).
  Si aucune valeur n'est indiquée dans les parenthèses, grayscale() provoque une désaturation totale.

  Les valeurs négatives ne sont pas autorisées.

Exemples d'utilisation de la fonction grayscale().

Réagir au survol de la souris.

Au survol de la souris, les images retrouvent leurs couleurs. En fait dans notre exemple, il ne s'agit pas d'images mais de caractères de la plage 1F300 à 1F5FF mais le résultat serait identique avec des images.

Simulateur avec la fonction grayscale()

Effet sur du texte

Prise en charge par les navigateurs (compatibilité).

Tous les filtres graphiques sont bien reconnus par les navigateurs actuels. Il en est de même de la fonction grayscale().

1

Filtres
graphiques

2

Fonction
grayscale()

Estimation de la prise en charge globale.

96%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra

Safari

Firefox

Chrome pour Androïd

Chrome

Edge

Androïd Brower

Opéra mini

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

Caniuse

Caniuse

Historique de la fonction grayscale().

• Module effets et filtres - Niveau 1

  Première version du module Filter effects décrivant entre autres la fonction grayscale().
  

  25 Octobre 2012

  Document de travail.

  

  

  

Voir aussi : autres effets et filtres graphiques.

Les effets graphiques disponibles en CSS sont nombreux. Ils sont décrits dans la spécification du W3C Filter Effects Module. Voici la liste des filtres graphiques et des propriétés qui permettent de les mettre en œuvre.

Propriétés :

Fonctions :