Grayscale() - Fonction CSS

grayscale()

Résumé des caractéristiques de la fonction grayscale()

Description rapide
Convertit un élément en nuances de gris (filtre graphique) de façon plus moins complète. A l'extrême les couleurs peuvent être complètement supprimées.
Statut
Standard
Pourcentages
100% correspond à une disparition complète des couleurs (image en noir et blanc).
Module W3C
Module filtres et effets
Références (W3C)
Statut du document: WD (document de travail)

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

filter :
Effet sur du texte
Démo pour la fonction grayscale()

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

Colonne 1
Capacité à appliquer un filtre sur un élément, avec la propriété filter.
Colonne 2
Support de la fonction grayscale() pour afficher un élément en nuances de gris.
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

    Concernant grayscale(). Première version du module Filter effects décrivant entre autres la fonction grayscale().
    WD
    25 Octobre 2012
    Document de travail.
    CR
    PR
    REC

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 module filtres et effets. Voici la liste des filtres graphiques et des propriétés qui permettent de les mettre en œuvre.

Propriétés :

backdrop-filter
Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.
color-interpolation
Définit l'espace de couleurs à utiliser pour calculer les dégradés, les animations et les combinaisons avec la couche alpha.
color-interpolation-filters
Définit dans quel espace de couleurs sont calculés les effets de filtrage. Par défaut cet espace est le linearRGB
filter
Applique un filtre graphique (flou, contraste, luminosité...) à un élément.
flood-color
Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.
flood-opacity
Définit l'opacité des remplissages et des ombrages dans le contexte de filtres SVG.
lighting-color
Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.

Fonctions :

blur()
blur() est un filtre graphique utilisable avec la propriété filter. La fonction applique un effet de flou sur l'élément.
brightness()
Ajuste la luminosité d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.
contrast()
Ajuste le contraste d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.
drop-shadow()
Définit l'ombre d'un élément : dimensions, flou, couleur, etc. C'est un filtre graphique qui s'utiilise avec la propriété filter.
Grayscale()
Convertit un élément en nuances de gris (filtre graphique) de façon plus moins complète. A l'extrême les couleurs peuvent être complètement supprimées.
hue-rotate()
Change les couleurs d'une image en effectuant une rotation des teintes (filtre graphique).
invert()
Inverse les couleurs d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec le propriété filter.
opacity()
Détermine le degré de transparence d'un élément. C'est un filtre graphique qui s'utilise avec la propriété filter.
saturate()
Définit la saturation des couleurs d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.
sepia()
Applique un effet sépia à une image ou un élément quelconque. C'est un (filtre graphique qui s'utilise avec la propriété filter.