This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

hue-rotate()

Summary

Shifts an element’s relative hue, for use by the filter property. Accepts either a deg or rad angle measurement representing a wheel of hues.

This CSS property value is reflected in the following image:

filter: hue-rotate(90deg);

f11-mandrill.jpgf12-mandrillhuerotate.jpg

Specifying measurements greater than 360° (or 2π rad) allows animations to cycle more than once around the color wheel. This example cycles colors three times, returning to its original set of hues (360 × 3):

@keyframes spinCycle {
    from { filter: hue-rotate(0deg)    }
    to   { filter: hue-rotate(1080deg) }
}

Examples

The following example shows the difference between two images, where one has a hue rotation of 180 degrees.

filter huerotate.png

<!DOCTYPE html>
<html>
  <head>
    <title>Filter example</title>
    <style>
      .foo {
        float: left;
      }

      .bar {
        -webkit-filter: hue-rotate(180deg);
      }
    </style>
  </head>
  <body>
    <img src="/logo/wplogo_transparent_xlg.png" class="foo" />
    <img src="/logo/wplogo_transparent_xlg.png" class="foo bar" />
  </body>
</html>

View live example

Notes

The CSS filter corresponds to this SVG filter definition, based on a variable angle passed to the function:

<filter id="hue-rotate">
  <feColorMatrix type="hueRotate" values="[angle]"/>
</filter>

Note that the hue rotation algorithm for CSS filters only approximates a hue-rotation in HSL - the content is never actually converted to the HSL color space. This results in brightness and saturation clipping for saturated colors in certain ranges. For example, pure RGB colors, such as rgb(255,0,0), do not produce expected results, especially between 0 and 90 degrees. A comparison of manually rotated colors (outer ring) made by explicitly defining HSL colors, and their hue-rotate() equivalent (inner ring) using a base of pure RGB red (HSL equivalent: 0,100%,50%) is shown below. As you can see, the 60 degree hue rotation that should produce a bright saturated yellow, instead produces a color of the correct hue, but incorrect saturation and brightness.

saturated hue rotation.JPG

Related specifications

Filter Effects 1.0
Editor’s Draft
Filter Effects 1.0
Working Draft

See also

Related articles

Filters

External resources