hue-rotate()

The hue-rotate() CSS function rotates the hue of an element and its contents. Its result is a <filter-function>.

Note: hue-rotate() is specified as a matrix operation on the RGB color. It does not actually convert the color to the HSL model, which is a non-linear operation. Therefore, it may not preserve the saturation or lightness of the original color, especially for saturated colors.

Try it

Syntax

The hue-rotate() function applies a color rotation to the elements on which it is applied.

css

hue-rotate(angle)

Values

angle: The relative change in hue of the input sample, specified as an <angle>. A value of 0deg leaves the input unchanged. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. The initial value for interpolation is 0. There is no minimum or maximum value. The effect of values above 360deg are, given hue-rotate(Ndeg), evaluates to N modulo 360.

The <angle> CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. The following are equivalent:

css

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

Formal syntax

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

Examples

With the backdrop-filter property

This example applies a hue-rotate() filter via the backdrop-filter CSS property to the paragraph, color shifting to the area behind the <p>.

css

.container {
  background: url(image.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: #ffffff;
  font-size: 2rem;
  font-family: sans-serif;
}

<div
  class="container"
  style="background-image: url(listen_to_black_women.jpg);">
  <p>
    Text on images can be illegible and inaccessible even with a drop shadow.
  </p>
</div>

With the filter property

This example applies a hue-rotate() filter via the filter CSS property adding the color shift to the entire element, including content, border, and background image.

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>The person who wrote this example is not a designer, fortunately.</p>

With url() and the SVG hue-rotate filter

The SVG <filter> element is used to define custom filter effects that can then be referenced by id. The <filter>'s <feColorMatrix> primitive hueRotate type provides the same effect. Given the following:

svg

<filter id="filterID">
  <feColorMatrix type="hueRotate" values="90" />
</filter>

These values produce the same results:

css

filter: hue-rotate(90deg); /* 90deg rotation */
filter: url(#filterID); /* with embedded SVG */
filter: url(folder/fileName.svg#filterID); /* external svg filter definition */

This example shows three images: the image with a hue-rotate() filter function applied, the image with an equivalent url() filter applied, and the original images for comparison:

<table cellpadding="5">
  <thead>
    <tr>
      <th><code>hue-rotate()</code></th>
      <th><code>url()</code></th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          style="filter: hue-rotate(90deg)"
          src="flag.jpg"
          alt="Pride flag with rotated colors" />
      </td>
      <td>
        <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>
          <image
            xlink:href="flag.jpg"
            filter="url(#hue-rotate)"
            width="220"
            height="220" />
        </svg>
      </td>

      <td><img src="flag.jpg" alt="Pride flag" /></td>
    </tr>
  </tbody>
</table>

hue-rotate() does not preserve saturation or lightness

The diagram below compares two color gradients starting with red: the first is generated using hue-rotate(), and the second uses actual HSL color values. Note how the hue-rotate() gradient shows obvious differences in saturation and lightness in the middle.

html

<div>
  <p>Using <code>hue-rotate()</code></p>
  <div id="hue-rotate"></div>
</div>
<div>
  <p>Using <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);
}

Specifications

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

Browser compatibility

BCD tables only load in the browser