[ @sdxc/u/effects ]

saturate

Applies a filter: saturate(...) to the element itself, where 0 is fully desaturated and values above 1 oversaturate.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.saturate(1.5)`	`css({ "--ui-filter-saturate": "1.5", filter: "... saturate(var(--ui-filter-saturate, 1)) ..." })`

Examples

Basic example

Use saturate(n) to mute an element's colors below 1 or intensify them above 1:

saturate(0.5)

saturate(1.5)

saturate(2)

<div mix={[...]}>
	<div mix={[...]}>
		<img mix={[saturate(0.5), ...]} src={...} alt="" />
		<span mix={[...]}>saturate(0.5)</span>
	</div>
	<div mix={[...]}>
		<img mix={[saturate(1.5), ...]} src={...} alt="" />
		<span mix={[...]}>saturate(1.5)</span>
	</div>
	<div mix={[...]}>
		<img mix={[saturate(2), ...]} src={...} alt="" />
		<span mix={[...]}>saturate(2)</span>
	</div>
</div>

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.saturate("2.75rem")

Applying on a state

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

u.hover(u.saturate(1.5))

Responsive design

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

u.at("md", u.saturate(1.5))

Signature

u.saturate(value?: number | (string & {}))