🎨 CSS Tutorial: hue-rotate()

📌 Introduction

The hue-rotate() function in CSS is part of thefilter property and is used to rotate (shift) the colors of an element around the color wheel. It changes every hue value while keeping saturation and brightness intact. This effect is commonly used for dynamic color transformations, animations, and creative image effects. 🎨✨

🎯 What Does hue-rotate() Do?

  • Rotates hue values by a specified angle
  • Keeps lightness & saturation unchanged
  • Creates fun or dramatic color-shift effects
  • Can be animated for vibrant visuals

✨ Syntax

Syntax

selector {
  filter: hue-rotate(<angle>);
}

Note

Angle units: degrees (deg) are most common, but radians (rad) and turns (turn) also work.

🧩 Examples of Angles

Examples

filter: hue-rotate(45deg);
filter: hue-rotate(90deg);
filter: hue-rotate(180deg); /* opposite color */
filter: hue-rotate(360deg); /* original color */

🔥 Practical Examples

1. Basic Color Shift

Basic Example

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

2. Hover Color Effect

Hover Example

.image:hover {
  filter: hue-rotate(180deg);
  transition: filter 0.3s ease;
}

3. Animated Rainbow Effect

Animation

.rainbow {
  animation: rainbow 4s linear infinite;
}

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

4. Combining Filters

Combined Filters

.fx {
  filter: grayscale(50%) hue-rotate(90deg) brightness(1.2);
}

📊 How hue-rotate() Affects Color

Hue RotationEffect
0degNo change
90degColor shifts by 1/4 of wheel
180degOpposite color (complement)
270degDramatic contrasting shift
360degBack to original

🧠 Tips for Best Use

  • Use subtle shifts (15–45deg) for natural color adjustments
  • Use large rotations (180deg) for dramatic effects
  • Animate hue-rotate() for rainbow or glowing effects
  • Combine with brightness() and contrast() for strong filters
  • Use on icons, images, buttons, and backgrounds creatively

🖼️ Visual Demo

Further details can be found at: https://dummyimage.com/900x250/eeeeee/000/fff&text=hue-rotate()+demo

>>“Hue rotation unlocks endless creative possibilities — from subtle color tweaks to full-on psychedelic effects.” 🌈

🎉 Conclusion

The hue-rotate() function is a powerful part of CSS filters that manipulates the hue of an element for creative and dynamic visual effects. Whether you're building color-changing animations, interactive UI effects, or enhancing images, mastering hue-rotate() adds a vibrant layer of expression to your web designs. 🚀