Hue rotate
--jib-hue-rotate() walks a color around the wheel by a number of degrees and returns the result. Because it returns a value rather than styling an element, you can call it several times in one declaration and build a whole scheme out of a single token.
Chromium only
CSS @function ships in Chromium and nowhere else yet. An engine without it drops the declaration outright, so every example here is blank in Firefox and Safari.
For a rotated background, border, text, fill, stroke, outline or accent in every engine, use the stable utilities.
Quick reference
| Call | Returns |
|---|---|
--jib-hue-rotate(<color>, <degrees>) | the color, hue advanced by deg degrees |
--jib-hue-rotate(<color>, -<degrees>) | the color, hue retarded by deg degrees |
--jib-hue-rotate(<color>, <degrees>, <space>) | the same, computed in the named color space |
--jib-<space>-hue-rotate(<color>, <degrees>) | the per-space function, called without the dispatch |
The amount is a bare number of degrees, and it wraps, so 370 and 10 agree. Lightness and chroma are left alone. The space argument is optional and defaults to oklch.
What the utility cannot reach
A whole scheme from one token
This is the case the class form cannot express at all. Each stop is the same token at a different rotation, so the entire ramp is defined by one color and a set of angles.
<div
class="bg-[linear-gradient(90deg,var(--color-teal-500),
--jib-hue-rotate(var(--color-teal-500),60),
--jib-hue-rotate(var(--color-teal-500),120),
--jib-hue-rotate(var(--color-teal-500),180))]"
></div>Swap --color-teal-500 for any other token and the whole ramp re-derives, still evenly spaced.
Layered shadows, each a further step round
<div
class="bg-teal-500
shadow-[8px_0_0_--jib-hue-rotate(var(--color-teal-500),40),
16px_0_0_--jib-hue-rotate(var(--color-teal-500),80),
24px_0_0_--jib-hue-rotate(var(--color-teal-500),120)]"
></div>Split text shadows
Two rotations in opposite directions, offset either side of the glyphs.
<span
class="text-teal-500
[text-shadow:-2px_0_0_--jib-hue-rotate(var(--color-teal-500),-70),
2px_0_0_--jib-hue-rotate(var(--color-teal-500),70)]"
>
out of register
</span>An underline off the text color
<a
class="text-teal-600 underline decoration-4
decoration-[--jib-hue-rotate(var(--color-teal-600),150)]"
>
a complementary underline
</a>Agreeing with the utility
Per-space variants
| Space family | Functions |
|---|---|
| Perceptual polar | --jib-oklch-hue-rotate, --jib-lch-hue-rotate |
| Perceptual rectangular | --jib-oklab-hue-rotate, --jib-lab-hue-rotate |
| Legacy | --jib-hsl-hue-rotate, --jib-hwb-hue-rotate |
| RGB family | --jib-rgb-hue-rotate, --jib-srgb-hue-rotate, --jib-srgb-linear-hue-rotate, --jib-display-p3-hue-rotate, --jib-a98-rgb-hue-rotate, --jib-prophoto-rgb-hue-rotate, --jib-rec-2020-hue-rotate |
| Device-independent | --jib-xyz-hue-rotate, --jib-xyz-d50-hue-rotate, --jib-xyz-d65-hue-rotate |
The polar spaces add to the hue angle directly. Lab and Oklab rotate the a/b plane trigonometrically, and the RGB family applies a luma-preserving matrix. An unrecognised space falls back to oklch.
There is no color-mix path
color-mix() blends toward a second color, and lightness and saturation both have one to name up front: white or black for lightness, gray for saturation. A rotation does not. The color you land on is the answer, so there is nothing to aim at until you already have it, and any fixed substitute would wash the hue toward that color instead of rotating it.
So the space is absent rather than approximated. --jib-color-mix-hue-rotate does not exist, and bg-hue-rotate-90/color-mix emits no rule, which gives you no rotation instead of a wrong one.
The override
This module re-implements bg-hue-rotate-* 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.