CSS Function

hue-rotate()

The hue-rotate() filter function rotates the hue of all colors in an element's rendering by a specified angle.

Syntax

filter: hue-rotate(angle)

Parameters

Name	Type	Required	Description
angle	angle	Yes	Rotation angle: 0deg (original), 180deg (complementary), 360deg (back to original)

Examples

Shift to complementary

Shifts all colors to their complementary hue.

css

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

Animated color cycle

Continuously cycles through all hues.

css

@keyframes rainbow {
  to { filter: hue-rotate(360deg); }
}
.rainbow { animation: rainbow 3s linear infinite; }

Tailwind utility

Tailwind provides hue-rotate-{angle} utilities.

html

<div class="hue-rotate-90">Shifted colors</div>

Browser Support

✓

Chrome

v18++

✓

Firefox

v35++

✓

Safari

v6++

✓

Edge

v12++

✓

Opera

v15++

Tailwind Equivalent

You can achieve similar results in Tailwind CSS using the following utility classes:

hue-rotate-{angle}: hue-rotate-0, hue-rotate-15, hue-rotate-30, hue-rotate-60, hue-rotate-90, hue-rotate-180

Frequently Asked Questions

Does hue-rotate produce the same result as changing HSL hue?▼

Not exactly. hue-rotate applies a matrix rotation in RGB space, which can cause slight saturation and lightness shifts. Direct HSL hue changes are more precise.

Can I use hue-rotate for theming?▼

It is possible for simple cases but not recommended. Rotating all hues affects images, shadows, and UI elements indiscriminately. Use CSS custom properties for proper theming.

Explore CSS Color Tools

Try our free tools to work with hue-rotate() and other CSS color functions.

Open Tools