CssHow-ToBeginner · 3 min read

How to Use hue-rotate Filter in CSS: Syntax and Examples

Use the CSS filter property with hue-rotate(angle) to shift the colors of an element by rotating its hue on the color wheel. The angle is specified in degrees (e.g., hue-rotate(90deg)) and changes the color tone without affecting brightness or saturation.

📐

Syntax

The hue-rotate() function is used inside the CSS filter property to rotate the hue of an element's colors. The syntax is:

filter: hue-rotate(angle);
angle is the degree of rotation on the color wheel, such as 0deg (no change), 90deg, 180deg, or 360deg.

This changes the color tone but keeps brightness and saturation the same.

css

/* Syntax example */
.element {
  filter: hue-rotate(90deg);
}

💻

Example

This example shows a colored box with the hue-rotate filter applied. The original color is red, and the filter rotates its hue by 90 degrees, changing it to a greenish color.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hue Rotate Example</title>
<style>
  .box {
    width: 150px;
    height: 150px;
    background-color: red;
    filter: hue-rotate(90deg);
    margin: 20px;
    border-radius: 8px;
  }
</style>
</head>
<body>
  <div class="box" aria-label="Colored box with hue-rotate filter"></div>
</body>
</html>

Output

A square red box displayed with its color shifted to greenish by the hue-rotate filter.

⚠️

Common Pitfalls

Common mistakes when using hue-rotate include:

Not specifying units for the angle (e.g., writing hue-rotate(90) instead of hue-rotate(90deg)), which is invalid.
Applying hue-rotate to elements without colors or images, so no visible effect appears.
Expecting hue-rotate to change brightness or saturation; it only changes hue.

css

/* Wrong: missing units */
.element {
  filter: hue-rotate(90); /* Invalid, no 'deg' */
}

/* Correct: with units */
.element {
  filter: hue-rotate(90deg);
}

📊

Quick Reference

Tips for using hue-rotate:

Use degrees with deg unit, e.g., hue-rotate(180deg).
Combine with other filters like brightness() or saturate() for creative effects.
Works on images, backgrounds, text, and SVG elements.
Use browser DevTools to experiment with different angles live.

✅

Key Takeaways

Use filter: hue-rotate(angle) with an angle in degrees to shift colors.

Always include the unit deg for the angle to avoid errors.

hue-rotate changes color tone but not brightness or saturation.

Apply hue-rotate to colored elements to see visible effects.

Combine hue-rotate with other filters for richer visual styles.