Saturate() - Fonction CSS

saturate()

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

Description rapide
Définit la saturation des couleurs d'un élément (filtre graphique).
Statut
Standard
Pourcentages
100% correspond à la saturation initiale (pas de modification).
Module W3C
Module filtres et effets
Références (W3C)
Statut du document: WD (document de travail)

Description de la fonction saturate().

La fonction saturate() définit le degré de saturation des couleurs d'un élément, le plus souvent une image. Rappelons que la saturation qualifie la vivacité des couleurs. Des couleurs peu saturées sont proches du gris.

La fonction saturate() a un effet comparable à la fonction grayscale() (bien que fonctionnant de façon inversée) mais utilise un algorithme différent.

La valeur saturate() 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 saturate().

  • filter: saturate(50%); n

    n est un nombre positif sans unité ou un pourcentage.
    cette valeur indique le taux de saturation :
    1 ou 100% ne change rien à l'image, tandis que 0 provoque une désaturation totale de l'image (remplacement de toutes les couleurs par des nuances de gris). Les valeurs supérieures à 1 ou à 100% augmentent la saturation des couleurs par rapport aux couleurs d'origine.

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

    Si aucune valeur n'est précisée (les parenthèses sont vides), la fonction saturate() applique la valeur 100%.

Simulateur avec la fonction saturate()

filter :
Démonstration de la fonction saturate()

Support de la fonction saturate().

Les filtres graphiques ne posent plus de problèmes de compatibilité. la fonction saturate() peut être utilisée sans restriction.

Colonne 1
Capacité à appliquer un filtre sur un élément, avec la propriété filter.
Colonne 2
Prise en charge de la fonction saturate() qui permet de gérer la saturation d'une image (en fait de n'importe élément).
1
Filtres
graphiques
2
Fonction
saturate()
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 saturate().

Voir aussi : autres effets et filtres graphiques.

Les effets graphiques disponibles en CSS sont décrits dans la spécification du W3C Filter Effects Module. En voici la liste, ainsi que celle 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'un élément (filtre graphique).
contrast()
Ajuste le contraste d'un élément (filtre graphique).
drop-shadow()
Définit l'ombre d'un élément : dimensions, flou, couleur (filtre graphique).
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'un élément (filtre graphique).
opacity()
Détermine le degré de transparence d'un élément (filtre graphique).
sepia()
Applique un effet sépia à un élément (filtre graphique).