Hue-rotate() - Fonction CSS

hue-rotate()

Résumé des caractéristiques de la fonction hue-rotate()

Description rapide
Change les couleurs d'une image en effectuant une rotation des teintes (filtre graphique).
Statut
Standard
Pourcentages
Non autorisés.
Module W3C
Module filtres et effets
Références (W3C)
Statut du document: WD (document de travail)

Description de la fonction hue-rotate().

La fonction hue-rotate() provoque un changement des couleurs d'un élément. Chacune des teintes sera décalée d'un certain angle sur la roue des couleurs.

En observant le schéma ci-dessous, vous voyez qu'un décalage de 90° transforme le rouge en vert, le vert en cyan, le bleu en violet, etc.

Fonction hue-rotate()

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

  • filter: hue-rotate(45deg); a

    hue-rotate() attend un seul paramètre :

    a est une valeur positive ou négative, suivie d'une unité angulaire (voir les unités d'angle). Bien que la syntaxe n'impose pas de limites inférieure et supérieure, la logique veut que a soit compris entre -360deg et 360deg.
    a indique l'angle de rotation sur la roue des couleurs. Il est possible également de spécifier a en fraction de tours avec l'unité turn. Par exemple 0.25turn correspond à 90° (un quart de tour).

    Exemples d'équivalences entre les unités d'angle :
    180deg = 200grad = 3.14rad = 0.5turn
    -270deg = 90deg = 100grad = 1.57rad = 0.25turn

    Si aucune valeur n'est précisée dans les parenthèses, la fonction ne provoque pas de changement de teinte (valeur par défaut = 0).

Simulateur avec la fonction hue-rotate()

Vous noterez que le changement de teinte n'a aucun effet sur le blanc. En effet quand la luminosité est au maximum, on obtient du blanc et la teinte n'a plus d'importance. Sur du noir le changement de teinte n'aurait également aucun effet.

filter :
Démo pour la fonction hue-rotate()

Support de la fonction hue-rotate().

Comme toutes les autres fonctions de filtre, hue-rotate() est bien reconnue par les navigateurs actuels.

Colonne 1
Capacité à appliquer un filtre sur un élément, avec la propriété filter.
Colonne 2
Support par les navigateurs de la fonction hue-rotate(), utilisable par exemple avec la propriété filter, et qui provoque un changement de teinte.
1
Filtres
graphiques
2
Fonction
hue-rotate()
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 hue-rotate().

  • Module effets et filtres - Niveau 1

    Première version du module CSS définissant les filtres graphiques (Filter effects), y compris la fonction hue-rotate().
    WD
    25 Octobre 2012
    Document de travail.
    CR
    PR
    REC

Voir aussi : effets et filtres graphiques.

Les effets graphiques décrits dans la spécification du W3C Filter Effects Module sont maintenant assez nombreux. En voici la liste ainsi que les 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.
invert()
Inverse les couleurs d'un élément (filtre graphique).
opacity()
Détermine le degré de transparence d'un élément (filtre graphique).
saturate()
Définit la saturation des couleurs d'un élément (filtre graphique).
sepia()
Applique un effet sépia à un élément (filtre graphique).