Skip to main content

Documentation Index

Fetch the complete documentation index at: https://skelementorcss.com/llms.txt

Use this file to discover all available pages before exploring further.

​
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