> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hue Rotate

> Use the bundled hue rotation utilities to shift imagery into a new color family.

export const FilterHueRotateDemo = () => {
  const levels = [{
    cls: "hue-rotate-15",
    val: "15deg"
  }, {
    cls: "hue-rotate-30",
    val: "30deg"
  }, {
    cls: "hue-rotate-60",
    val: "60deg"
  }, {
    cls: "hue-rotate-90",
    val: "90deg"
  }, {
    cls: "hue-rotate-180",
    val: "180deg"
  }];
  const imgSrc = "data:image/svg+xml," + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"><defs><linearGradient id="a" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#38bdf8"/><stop offset="33%" stop-color="#a855f7"/><stop offset="66%" stop-color="#ec4899"/><stop offset="100%" stop-color="#f97316"/></linearGradient></defs><rect width="400" height="300" fill="url(#a)"/><circle cx="80" cy="220" r="50" fill="rgba(255,255,255,0.15)"/><circle cx="300" cy="80" r="70" fill="rgba(255,255,255,0.1)"/></svg>');
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-5 gap-4">
          {levels.map(l => <div key={l.cls} className="flex flex-col items-center gap-2">
              <span className="tw-label">{l.cls}</span>
              <div className="rounded-lg overflow-hidden" style={{
    width: "100%",
    aspectRatio: "4/3"
  }}>
                <img src={imgSrc} alt="" style={{
    width: "100%",
    height: "100%",
    objectFit: "cover",
    filter: "hue-rotate(" + l.val + ")"
  }} />
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};

## 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.

| Class             | Filter (CSS)                  | Usage                                  |
| ----------------- | ----------------------------- | -------------------------------------- |
| `.hue-rotate-15`  | `filter: hue-rotate(15deg);`  | Gentle drift                           |
| `.hue-rotate-30`  | `filter: hue-rotate(30deg);`  | Moderate shift                         |
| `.hue-rotate-60`  | `filter: hue-rotate(60deg);`  | Strong color family change             |
| `.hue-rotate-90`  | `filter: hue-rotate(90deg);`  | Quarter-turn hue                       |
| `.hue-rotate-180` | `filter: hue-rotate(180deg);` | Complementary / dramatic stylized look |

## Example

<FilterHueRotateDemo />

### Markup

```html theme={null}
<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.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Saturate" icon="droplet" href="/filters/saturate">
    Adjust color intensity before or after rotating hue
  </Card>

  <Card title="Contrast" icon="circle-half-stroke" href="/filters/contrast">
    Tighten tonal separation alongside the hue shift
  </Card>
</CardGroup>