hue-rotate() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The hue-rotate() CSS function is used to adjust the hue of an element's colors by rotating them around the color wheel. This transformation is part of the filter property family, allowing you to create dynamic visual effects without altering the original image or element directly. The rotation is specified in degrees, where 0deg leaves the hue unchanged, 180deg inverts the colors to their complementary hues, and 360deg completes a full rotation back to the original colors.

This function is particularly useful for creating visual effects in graphics, images, or UI components, allowing designers to experiment with color variations efficiently. For instance, combining hue-rotate() with other brightness() or saturate() functions can produce complex color transformations.

Example usage:

img {
  filter: hue-rotate(90deg);
}

In this example, all the colors of the img element are rotated by 90 degrees on the color wheel, giving a noticeable shift in the overall color scheme without affecting the image structure.

Another practical application is animating color changes over time:

div {
  transition: filter 2s;
}
div:hover {
  filter: hue-rotate(180deg);
}

Here, when a div is hovered, its colors smoothly transition to their complementary hues, creating an engaging interactive effect.

The hue-rotate() function works with any element that can accept the filter property, including images, backgrounds, and SVG graphics, making it a versatile tool for dynamic color manipulation in modern web design.

Syntax

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

Values

angleThe relative change in hue of the input sample, specified as an . 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 lacuna value for interpolation is 0. There is no minimum or maximum value; hue-rotate(Ndeg) evaluates to N modulo 360.

Example

HTML

<div class="container">

  <div class="box original">

    <p>Original (0deg)</p>

  </div>

  

  <div class="box rotated">

    <p>Rotated (120deg)</p>

  </div>

</div>

CSS

/* Layout styling */

.container {

  display: flex;

  gap: 20px;

  font-family: sans-serif;

}



.box {

  width: 150px;

  height: 150px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-weight: bold;

  background-color: #ff0000; /* Bright Red */

}



/* The Filter Effect */

.rotated {

  /* 120 degrees turns Red into Green */

  filter: hue-rotate(120deg);

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS hue-rotate() function. Hover over a browser icon to see the version that first introduced support for this CSS function.