CSS hue-rotate() Function

CSS hue-rotate() Function

The CSS hue-rotate() function shifts the colors of an element by applying a specified angle of hue rotation.

It is used with the filter and backdrop-filter properties to change the appearance of images, backgrounds, text, and other rendered content without modifying the original source. The rotation can be positive or negative and can also be animated.

Syntax

hue-rotate()
hue-rotate(angle)

The optional angle parameter specifies the amount of hue rotation.

For example:

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

This applies a 90-degree hue rotation to the rendered image.

Additional examples:

filter: hue-rotate(0deg);
filter: hue-rotate(45deg);
filter: hue-rotate(180deg);
filter: hue-rotate(-90deg);
filter: hue-rotate(0.5turn);
filter: hue-rotate();

If the argument is omitted, the default is 0deg, which leaves the colors unchanged.

The function returns a CSS <filter-function> value.

Parameters

The hue-rotate() function accepts one optional parameter.

For example:

hue-rotate(90deg)
hue-rotate(0.25turn)

Both expressions specify a 90-degree rotation.

Important rules include:

• 0deg leaves the original colors unchanged.
• Positive angles rotate colors in one direction.
• Negative angles rotate colors in the opposite direction.
• Angles greater than 360 degrees are allowed.
• Angles can be expressed using different CSS angle units.
• An omitted argument defaults to zero rotation.

The function accepts an angle, not a percentage or ordinary nonzero unitless number.

How It Works

The hue-rotate() function applies a color transformation to the rendered pixels of an element.

The process works as follows:

1. The browser renders the element and its content.
2. The hue rotation filter transforms the red, green, and blue color components.
3. The specified angle determines the amount of color shifting.
4. The browser displays the filtered result without modifying the original source.

For example:

.graphic {
  filter: hue-rotate(120deg);
}

This changes the graphic's colors according to a 120-degree hue rotation.

Although the function is described using hue rotation, it performs a mathematical transformation of RGB color values rather than directly editing HSL hue values.

As a result, the filter may also change the apparent saturation and lightness of some colors.

The original CSS colors and image files remain unchanged.

Angle Values

The hue-rotate() function accepts CSS angle units.

All four examples specify approximately the same 90-degree rotation.

For most CSS projects, degrees are the easiest unit to read and maintain.

Unlike grayscale() or saturate(), the hue-rotate() function does not accept percentages.

Positive and Negative Angles

Positive and negative angles rotate colors in opposite directions.

For example:

.positive {
  filter: hue-rotate(90deg);
}
.negative {
  filter: hue-rotate(-90deg);
}

The first applies a positive 90-degree rotation. The second applies a negative 90-degree rotation.

Equivalent rotations include:

For example:

filter: hue-rotate(-90deg);
filter: hue-rotate(270deg);

These produce the same hue rotation effect.

Negative angles can be useful when animating colors in the opposite direction.

Full Rotations

Hue rotations repeat every 360 degrees.

For example:

hue-rotate(0deg)
hue-rotate(360deg)
hue-rotate(720deg)

All three produce the same final appearance.

Similarly:

hue-rotate(90deg)
hue-rotate(450deg)
hue-rotate(-270deg)

These produce equivalent color transformations.

Angles outside the 0-to-360-degree range are valid and are equivalent to their angle modulo 360 degrees for the final filter effect.

However, larger angle values can still be useful in animations because the intermediate values determine how the colors change over time.

For example:

@keyframes hue-cycle {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

This creates a full cycle of color changes, even though the starting and ending appearances match.

Using hue-rotate() with filter

The filter property applies hue rotation to the rendered appearance of an element.

For example:

.photo {
  filter: hue-rotate(180deg);
}

This shifts the colors of the entire image.

The effect can also be applied to a container:

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

In this case, the filter affects the card's rendered appearance, including its text, background, borders, images, and descendants.

To change only an image without affecting surrounding text, apply the filter directly to the image:

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

Use filter: none; to remove all filter effects from an element.

Using hue-rotate() with backdrop-filter

The backdrop-filter property applies hue rotation to the area behind an element rather than directly filtering the element's own content.

For example:

.overlay {
  background-color: rgb(255 255 255 / 15%);
  backdrop-filter: hue-rotate(120deg);
}

The colors visible through the overlay are shifted while the overlay's own text remains unfiltered by that backdrop effect.

The background must be transparent or partially transparent for the filtered area behind it to be visible.

Another example:

.glass-panel {
  background-color: rgb(255 255 255 / 20%);
  backdrop-filter: hue-rotate(180deg) blur(5px);
}

This changes the colors and blurs the backdrop.

Browser support for backdrop-filter is separate from support for the hue-rotate() function.

Combining Filters

The hue-rotate() function can be combined with other CSS filter functions.

For example:

.image {
  filter: hue-rotate(90deg) saturate(150%);
}

This applies a hue rotation and then increases saturation.

Other combinations include:

Filter functions are applied in the order they appear.

Changing the order can change the final appearance, particularly when combining different color transformations.

For example:

filter: hue-rotate(90deg) sepia(50%);
filter: sepia(50%) hue-rotate(90deg);

These declarations may produce different results because the sepia and hue rotation operations are applied in a different order.

Transitions and Animations

The hue-rotate() function can be animated with CSS transitions and keyframes.

For example:

.image {
  filter: hue-rotate(0deg);
  transition: filter 0.4s ease;
}
.image:hover {
  filter: hue-rotate(120deg);
}

The image gradually shifts colors when hovered.

A continuous animation can rotate through a complete color cycle:

.animated-image {
  animation: hue-cycle 5s linear infinite;
}
@keyframes hue-cycle {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

The colors continuously change and return to their starting appearance after each cycle.

To respect reduced-motion preferences:

@media (prefers-reduced-motion: reduce) {
  .animated-image {
    animation: none;
  }
}

Use transitions and animations selectively, especially when color changes could distract from important content.

Example

This example compares an original colorful design with three different hue rotations.

HTML:

<div class="hue-demo">
  <div class="hue-demo-item">
    <div class="hue-demo-art hue-original">CSS</div>
    <p>Original</p>
  </div>
  <div class="hue-demo-item">
    <div class="hue-demo-art hue-90">CSS</div>
    <p>90deg</p>
  </div>
  <div class="hue-demo-item">
    <div class="hue-demo-art hue-180">CSS</div>
    <p>180deg</p>
  </div>
  <div class="hue-demo-item">
    <div class="hue-demo-art hue-270">CSS</div>
    <p>270deg</p>
  </div>
</div>

CSS:

.hue-demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  max-width: 360px;
  margin: 0 auto;
}
.hue-demo-item {
  text-align: center;
}
.hue-demo-item p {
  margin: 8px 0 0;
  font-size: 13px;
}
.hue-demo-art {
  display: grid;
  place-items: center;
  height: 90px;
  border-radius: 6px;
  background: linear-gradient(135deg, #0066cc, #e83e8c, #ffc107);
  color: #fff;
  font-size: 26px;
  font-weight: bold;
}
.hue-original { filter: hue-rotate(0deg); }
.hue-90 { filter: hue-rotate(90deg); }
.hue-180 { filter: hue-rotate(180deg); }
.hue-270 { filter: hue-rotate(270deg); }

All four designs use the same background gradient. Only the hue-rotate() value changes.

The first retains its original colors, while the remaining designs demonstrate different color transformations.

Because the filter operates on RGB values, the resulting colors are not necessarily identical to changing each gradient stop's HSL hue by the same angle.

Hover Example

This example uses a transition to shift the colors of a design when hovered or focused.

HTML:

<button class="hue-hover-demo" type="button">
  <span class="hue-hover-art">CSS</span>
  <span class="hue-hover-label">Hover or Focus to Change Colors</span>
</button>

CSS:

.hue-hover-demo {
  display: block;
  width: 240px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
}
.hue-hover-art {
  display: grid;
  place-items: center;
  height: 120px;
  background: linear-gradient(135deg, #0066cc, #e83e8c, #ffc107);
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  filter: hue-rotate(0deg);
  transition: filter 0.4s ease;
}
.hue-hover-label {
  display: block;
  padding: 10px;
  color: #333;
  font-size: 13px;
}
.hue-hover-demo:hover .hue-hover-art,
.hue-hover-demo:focus-visible .hue-hover-art {
  filter: hue-rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .hue-hover-art {
    transition: none;
  }
}

The design begins with its original colors. Hovering over the button or focusing it with the keyboard gradually applies a 180-degree hue rotation.

The transition is disabled for users who prefer reduced motion.

hue-rotate() vs. hsl()

The hue-rotate() and hsl() functions both relate to hue, but they serve different purposes.

For example:

.filtered {
  background-color: red;
  filter: hue-rotate(120deg);
}
.colored {
  background-color: hsl(120 100% 50%);
}

These declarations are not guaranteed to produce the same green color.

The filter uses an RGB matrix operation that may change saturation and lightness, while hsl() directly defines the requested HSL components.

Use hsl() when precise control over a CSS color is needed. Use hue-rotate() when you want to shift the appearance of existing rendered content.

Accessibility

Hue rotation can change the contrast and appearance of text, icons, and other content.

Consider the following guidelines:

• Check text contrast after applying a hue rotation.
• Do not rely on color changes alone to communicate important information.
• Keep interactive controls recognizable in their filtered states.
• Provide keyboard focus behavior when using hover effects.
• Respect reduced-motion preferences when animating filters.
• Avoid rapid or distracting continuous color animations.

For example:

.status-icon {
  filter: hue-rotate(90deg);
}

This changes the icon's appearance but does not change its meaning or accessibility information.

When a color indicates success, warning, or error, provide an accompanying label or other non-color indicator.

Common Uses

The hue-rotate() function is useful for changing the appearance of existing graphics and creating color-based effects.

For example:

.graphic-variation {
  filter: hue-rotate(135deg);
}

This creates an alternate color appearance from the same graphic.

Limitations

The hue-rotate() function has several important rules and limitations.

• It accepts only one optional angle argument.
• Percentages and nonzero unitless numbers are not valid angles.
• Negative angles and angles greater than 360 degrees are valid.
• Rotations repeat every 360 degrees.
• The function does not directly modify HSL hue values.
• Saturation and lightness may change during the RGB matrix transformation.
• Applying the filter to a container also affects its rendered descendants.
• The original CSS colors and image files remain unchanged.
• The filter does not change an element's layout dimensions.
• Large filtered areas and continuous animations may increase rendering work.

For example, this is valid:

filter: hue-rotate(-120deg);

The following is invalid because the value is a percentage:

filter: hue-rotate(50%);

The following is invalid because the function accepts only one argument:

filter: hue-rotate(90deg, 180deg);

Use a single CSS angle value to specify the rotation.

Browser Support

The CSS hue-rotate() function is Baseline Widely available. It has been supported across major browser engines since September 2016.

It works in current versions of Chrome, Edge, Firefox, Safari, and other modern browsers when used with the filter property.

Support for backdrop-filter is separate and may differ in older browsers.

For example:

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

For current compatibility information, visit Can I Use? .

Specifications

The hue-rotate() function is defined in the Filter Effects Module Level 1 .

The specification defines the hue rotation filter, its angle parameter, and its RGB color matrix transformation.

Related CSS functions include hsl(), grayscale(), saturate(), brightness(), and contrast().