Saturation

--jib-saturation() is the saturation transform as a callable value. Positive amounts push a color further from gray, negative amounts drain it toward gray, and the result is a color you can put anywhere a color is accepted.

bg-saturation-* and its siblings already cover the seven utility surfaces. What follows is everything else.

Chromium only

CSS @function ships in Chromium and nowhere else yet, and an engine without it drops the whole declaration rather than falling back. Every example here is blank in Firefox and Safari.

For a muted background, border, text, fill, stroke, outline or accent in every engine, use the stable utilities.

Quick reference

Call	Returns
--jib-saturation(<color>, <number>)	the color, saturated n% further from gray
--jib-saturation(<color>, -<number>)	the color, drained n% of the way to gray
--jib-saturation(<color>, <number>, <space>)	the same, computed in the named color space
--jib-saturate(<color>, <number>)	the same as a positive amount, named for the direction
--jib-desaturate(<color>, <number>)	the same as a negative amount, named for the direction
--jib-<space>-saturation(<color>, <number>)	the per-space function, called without the dispatch

Amount runs 0–100 as a percentage of the remaining distance, so -100 is fully gray and keeps the original lightness. The space argument is optional and defaults to oklch.

The directional aliases take the same three arguments and mirror the class API, so --jib-desaturate(c, 20) is bg-desaturate-20. Neither clamps: --jib-desaturate(c, -20) saturates, which is what lets one custom property animate through zero.

What the utility cannot reach

A gradient that drains to gray

The clearest case for a function. A ramp from a color to its own desaturated self needs two colors that must stay related; supply one and compute the other and there is only ever one token to change.

<div
  class="bg-[linear-gradient(90deg,var(--color-teal-500),
             --jib-saturation(var(--color-teal-500),-100))]"
></div>

Lightness is preserved across the ramp, so the bar reads as color draining out rather than as a fade to a lighter or darker gray.

A muted halo

<div
  class="bg-fuchsia-500
         shadow-[0_0_0_6px_--jib-saturation(var(--color-fuchsia-500),-70)]"
></div>

An underline that comes alive on hover

Arbitrary values take Tailwind's variants like anything else, so the function can sit behind hover:. A rule elsewhere setting the text-decoration shorthand will discard the derived color; see the note on lightness.

hover to saturate the underline

<a
  class="text-teal-600 underline decoration-4 transition-all
         decoration-[--jib-saturation(var(--color-teal-600),-90)]
         hover:decoration-[--jib-saturation(var(--color-teal-600),40)]"
>
  hover to saturate the underline
</a>

A caret and a column rule

The rule between these columns is the same token the border above uses, drained most of the way to gray so it separates without competing.

<input
  class="[border-color:--jib-saturation(var(--color-teal-500),-75)]
         caret-[--jib-saturation(var(--color-teal-500),50)]"
/>

Agreeing with the utility

bg-saturate-40

saturation(…,40)

bg-desaturate-70

saturation(…,-70)

Where a class covers the surface, use the class. It reads better and it works everywhere.

Per-space variants

Space family	Functions
Perceptual polar	--jib-oklch-saturation, --jib-lch-saturation
Perceptual rectangular	--jib-oklab-saturation, --jib-lab-saturation
Legacy	--jib-hsl-saturation, --jib-hwb-saturation
RGB family	--jib-rgb-saturation, --jib-srgb-saturation, --jib-srgb-linear-saturation, --jib-display-p3-saturation, --jib-a98-rgb-saturation, --jib-prophoto-rgb-saturation, --jib-rec-2020-saturation
Device-independent	--jib-xyz-saturation, --jib-xyz-d50-saturation, --jib-xyz-d65-saturation
Blend	--jib-color-mix-saturation

Saturation has a color-mix path because it has an endpoint to mix toward: gray. An unrecognised space falls back to oklch.

oklch

hsl

lab

color-mix

For which space to reach for and the full per-space matrix, see Color spaces in the stable docs.

The override

This module re-implements bg-saturation-*, bg-saturate-* and bg-desaturate-* on top of this function, on every surface, wherever @function is supported. See the overrides.

Import

@import 'tw-jib-css';
@import 'tw-jib-css-experimental/functions';

Baseline status

What these utilities are built on, live from the Web Platform Dashboard.