Skip to main content

​
Overview

Hue rotation utilities shift the hue of imagery by a fixed angle. They are useful for subtle brand tinting, stylized states, or creative treatments when the source asset should stay in place.
ClassFilter (CSS)Usage
.hue-rotate-15filter: hue-rotate(15deg);Gentle drift
.hue-rotate-30filter: hue-rotate(30deg);Moderate shift
.hue-rotate-60filter: hue-rotate(60deg);Strong color family change
.hue-rotate-90filter: hue-rotate(90deg);Quarter-turn hue
.hue-rotate-180filter: hue-rotate(180deg);Complementary / dramatic stylized look

​
Example

​
Markup

<img alt="Hue-shifted artwork" class="hue-rotate-60 rounded-xl" src="badge.jpg"/>

​
Best Practices

  • Use the small rotation helpers first when you only need a gentle color drift.
  • Reserve hue-rotate-180 for stylized states or dramatic transformations.
  • Stack hue rotation with saturation or contrast carefully so the image still feels intentional.

Saturate

Adjust color intensity before or after rotating hue

Contrast

Tighten tonal separation alongside the hue shift

Color Effects

Combine hue changes with grayscale, invert, or sepia treatments

Filters Overview

Review the full shipped filter surface