# hueRotate

> Applies a `filter: hue-rotate(...)`, rotating every pixel's hue by the given angle while preserving lightness and saturation, so one source asset can be retinted per theme.

```ts
import { hueRotate } from "@sdxc/u/effects";
```

Applies a `filter: hue-rotate(...)`, rotating every pixel's hue by the given
angle while preserving lightness and saturation, so one source asset can be
retinted per theme. A bare number is degrees; strings pass through as-is.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.hueRotate()` | `css({ "--ui-filter-hue-rotate": "90deg", filter: "... hue-rotate(var(--ui-filter-hue-rotate, 0deg)) ..." })` |
| `u.hueRotate("0.5turn")` | `css({ "--ui-filter-hue-rotate": "0.5turn", filter: "... hue-rotate(var(--ui-filter-hue-rotate, 0deg)) ..." })` |

## Examples

### Basic example

Use `hueRotate(n)` to rotate every color of an element around the color wheel by `n` degrees:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<img mix={[hueRotate(-60), ...]} src={...} alt="" />
		<span mix={[...]}>hueRotate(-60)</span>
	</div>
	<div mix={[...]}>
		<img mix={[hueRotate(90), ...]} src={...} alt="" />
		<span mix={[...]}>hueRotate(90)</span>
	</div>
	<div mix={[...]}>
		<img mix={[hueRotate(180), ...]} src={...} alt="" />
		<span mix={[...]}>hueRotate(180)</span>
	</div>
</div>
```

### Using other angle units

Pass a string to use any CSS angle unit, like `hueRotate("0.5turn")` or `hueRotate("1rad")`:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<img mix={[hueRotate("0.25turn"), ...]} src={...} alt="" />
		<span mix={[...]}>hueRotate("0.25turn")</span>
	</div>
	<div mix={[...]}>
		<img mix={[hueRotate("0.5turn"), ...]} src={...} alt="" />
		<span mix={[...]}>hueRotate("0.5turn")</span>
	</div>
	<div mix={[...]}>
		<img mix={[hueRotate("1rad"), ...]} src={...} alt="" />
		<span mix={[...]}>hueRotate("1rad")</span>
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.hueRotate())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.hueRotate())
```

## Signature

```ts
u.hueRotate(value?: AngleValue)
```