CSS - Fonction hue-rotate()

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.

La fonction hue-rotate() peut être utilisée avec :

• backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
• filter : Filtre graphique.

Syntaxe de la fonction hue-rotate().

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

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

  1. a est une valeur positive ou négative, suivie d'une unité angulaire (voir les unités angulaires en CSS). 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

Simulateur.

Voir aussi...

Couleurs - Propriétés.

• background-color : Définit la couleur de l'arrière-plan.
• border-color : Définit la couleur des bordures.
• caret-color : Choisit la couleur du marqueur de texte (curseur clignotant).
• color : Définit la couleur de l'avant plan (texte essentiellement).
• column-rule-color : Définit la couleur des lignes de séparation de colonnes.
• outline-color : Définit la couleur de l'encadrement (outline).
• text-decoration-color : Définit la couleur du trait de décoration.
• text-emphasis-color : Définit la couleur des caractères de mise en exergue.

Couleurs - Fonctions.

• hsl() : Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité.
• hsla() : Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
• hwb() : Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.
• rgb() : Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
• rgba() : Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.

Images et filtres - Propriétés.

• backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
• background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
• clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
• filter : Filtre graphique.
• image-rendering : Mode de mise à l'échelle des images.
• mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.

Images et filtres - Fonctions.

• blur() : Applique un effet de flou à une image.
• brightness() : Ajuste la luminosité d'une image.
• contrast() : Ajuste le contraste d'une image.
• drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
• grayscale() : Convertit une image en nuances de gris (noir et blanc).
• image() : Désigne ou définit une image.
• inset() : Définit un rectangle, utilisable pour découper une image.
• invert() : Inverse les couleurs d'une image.
• opacity() : Détermine le degré de transparence d'un élément.
• saturate() : Définit la saturation des couleurs d'une image.
• sepia() : Applique un effet sépia à une image.