hue-rotate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨septembre 2016⁩.

La fonction CSS hue-rotate() permet d'appliquer une rotation de teinte sur une image. Le résultat de cette fonction est une valeur <filter-function>.

Exemple interactif

filter: hue-rotate(0);

filter: hue-rotate(90deg);

filter: hue-rotate(-0.25turn);

filter: hue-rotate(3.142rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntaxe

css

hue-rotate(angle)

Paramètres

angle Facultatif: Le changement relatif de la teinte de l'échantillon d'entrée, exprimé avec un <angle>. Une valeur de 0deg laisse l'entrée inchangée. Une rotation positive augmente la valeur de la teinte, tandis qu'une rotation négative la diminue. La valeur initiale pour l'interpolation est 0. Il n'y a pas de valeur minimale ou maximale. L'effet des valeurs supérieures à 360deg est, pour hue-rotate(Ndeg), équivalent à N modulo 360. La valeur par défaut est 0deg.

Le type de données CSS <angle> représente une valeur d'angle exprimée en degrés, en grades, en radians ou en tours. Les éléments suivants sont équivalents :

css

hue-rotate(-180deg)
hue-rotate(540deg)
hue-rotate(200grad)
hue-rotate(3.14159rad)
hue-rotate(0.5turn)

Syntaxe formelle

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )

Exemples

Avec la propriété `backdrop-filter`

Cet exemple applique un filtre hue-rotate() via la propriété CSS backdrop-filter au paragraphe, ce qui modifie la teinte de la zone située derrière le <p>.

css

.container {
  background: url("/shared-assets/images/examples/listen_to_black_women.jpg")
    no-repeat left / contain #011296;
}
p {
  backdrop-filter: hue-rotate(240deg);
  text-shadow: 2px 2px #011296;
}

.container {
  padding: 3rem;
  width: 30rem;
}
p {
  padding: 0.5rem;
  color: white;
  font-size: 2rem;
  font-family: sans-serif;
}

<div class="container">
  <p>
    Le texte sur les images peut être illisible et inaccessible même avec une
    ombre portée.
  </p>
</div>

Avec la propriété `filter`

Cet exemple applique un filtre hue-rotate() via la propriété CSS filter, ce qui modifie la teinte de l'ensemble de l'élément, y compris le contenu, la bordure et l'image d'arrière-plan.

css

p {
  filter: hue-rotate(-60deg);
  text-shadow: 2px 2px blue;
  background-color: magenta;
  color: goldenrod;
  border: 1em solid rebeccapurple;
  box-shadow:
    inset -5px -5px red,
    5px 5px yellow;
}

p {
  padding: 0.5rem;
  font-size: 2rem;
  font-family: sans-serif;
  width: 85vw;
}

<p>La personne qui a écrit cet exemple n'est pas designer, heureusement.</p>

Avec `url()` et le filtre SVG `hue-rotate`

L'élément SVG <filter> est utilisé pour définir des effets de filtre personnalisés qui peuvent ensuite être référencés par id. Le type hueRotate de la primitive <feColorMatrix> du <filter> fournit le même effet. Étant donné ce qui suit :

html

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 220 220"
  color-interpolation-filters="sRGB"
  height="220"
  width="220">
  <filter id="hue-rotate">
    <feColorMatrix type="hueRotate" values="90" />
  </filter>
</svg>

Ces valeurs produisent le même résultat :

css

filter: hue-rotate(90deg); /* rotation de 90deg */
filter: url("#hue-rotate"); /* avec SVG intégré */
filter: url("folder/fileName.svg#hue-rotate"); /* définition de filtre svg externe */

Cet exemple montre trois images : l'image avec la fonction de filtre hue-rotate() appliquée, l'image avec un filtre url() équivalent, et l'image d'origine pour comparaison :

<table cellpadding="5">
  <thead>
    <tr>
      <th><code>hue-rotate()</code></th>
      <th><code>url()</code></th>
      <th>Image d'origine</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="css-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag with rotated colors" />
      </td>
      <td>
        <img
          class="svg-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag with rotated colors" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

.css-filter {
  filter: hue-rotate(90deg);
}
.svg-filter {
  filter: url("#hue-rotate");
}
svg:not(:root) {
  display: none;
}

`hue-rotate()` ne préserve pas la saturation ni la luminosité

Le diagramme ci-dessous compare deux dégradés de couleurs à partir du rouge : le premier est généré avec hue-rotate(), le second utilise de vraies valeurs HSL. Remarquez que le dégradé obtenu avec hue-rotate() présente des différences notables de saturation et de luminosité au centre.

html

<div>
  <p>Avec <code>hue-rotate()</code></p>
  <div id="hue-rotate"></div>
</div>
<div>
  <p>Avec <code>hsl()</code></p>
  <div id="hsl"></div>
</div>

#hue-rotate,
#hsl {
  display: flex;
  margin: 1em 0;
}

#hue-rotate div,
#hsl div {
  width: 2px;
  height: 100px;
}

const hueRotate = document.getElementById("hue-rotate");
const hsl = document.getElementById("hsl");

for (let i = 0; i < 360; i++) {
  const div1 = document.createElement("div");
  div1.style.backgroundColor = `hsl(${i}, 100%, 50%)`;
  hsl.appendChild(div1);

  const div2 = document.createElement("div");
  div2.style.backgroundColor = "red";
  div2.style.filter = `hue-rotate(${i}deg)`;
  hueRotate.appendChild(div2);
}

Spécifications

Specification
Filter Effects Module Level 1 # funcdef-filter-hue-rotate

Compatibilité des navigateurs

Voir aussi

Le module des effets de filtre CSS
Les autres fonctions <filter-function> pouvant être utilisées dans les valeurs des propriétés filter et backdrop-filter sont :

Help improve MDN

Learn how to contribute

This page was last modified on ⁨14 oct. 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content