[ @sdxc/u/effects ]

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.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

hueRotate(-60)

hueRotate(90)

hueRotate(180)

<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"):

hueRotate("0.25turn")

hueRotate("0.5turn")

hueRotate("1rad")

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

u.hover(u.hueRotate())

Responsive design

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

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

Signature

u.hueRotate(value?: AngleValue)