hue-rotate()
============

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

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>
```

Specifications
--------------

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

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS filter effects module
* The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:
    + `blur()`
    + `brightness()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `invert()`
    + `opacity()`
    + `saturate()`
    + `sepia()`