Hue rotate
Rotate the hue of any color by a number of degrees. Positive values rotate clockwise, negative values counterclockwise. Works across all color-accepting properties and 16 color spaces, one fewer than lightness and saturation because rotation has no color-mix form.
A source color from a CSS variable must carry the color: hint
These utilities transform the color already on the element, so that color has to reach them. bg-(color:--brand) does; bg-(--brand) does not, because Tailwind will not infer a type from inside a var(). Without the hint the class still compiles and the color still appears, but the transform runs against an unset source: bg-* washes out to near-white, the other six surfaces go fully transparent. See Colors from CSS variables need a type hint.
Quick reference
| class | styles |
|---|---|
| bg-hue-rotate-<degrees> | Rotate background hue clockwise by <degrees> degrees |
| -bg-hue-rotate-<degrees> | Rotate background hue counterclockwise |
| bg-hue-rotate-<degrees>/<space> | Rotate in a specific color space |
| bg-hue-rotate-[<value>] | Rotate by an arbitrary number of degrees |
| bg-hue-rotate-(--<var>) | Rotate by a custom property |
| text-hue-rotate-<degrees> | Rotate text color hue |
| fill-hue-rotate-<degrees> | Rotate SVG fill hue |
| stroke-hue-rotate-<degrees> | Rotate SVG stroke hue |
| outline-hue-rotate-<degrees> | Rotate outline color hue |
| accent-hue-rotate-<degrees> | Rotate accent color hue |
| border-hue-rotate-<degrees> | Rotate border color hue |
Amount is 0–360 degrees. bg-hue-rotate-180 gives the complementary hue. Every surface takes the same negative prefix and /<space> modifier.
Examples
Walk the color wheel
<div class="bg-red-500 bg-hue-rotate-60">yellow-ish</div>
<div class="bg-red-500 bg-hue-rotate-180">complementary</div>Shift text color
<span class="text-blue-500 text-hue-rotate-90">shifted to green</span>Animate on hover
The hue amount is a registered @property variable, so it transitions:
<div class="bg-blue-500 hover:bg-hue-rotate-180 transition duration-700">hover to shift</div>Full rotation
Surfaces
| Surface | Clockwise | Counterclockwise |
|---|---|---|
| Background | bg-hue-rotate-<degrees> | -bg-hue-rotate-<degrees> |
| Text | text-hue-rotate-<degrees> | -text-hue-rotate-<degrees> |
| Fill | fill-hue-rotate-<degrees> | -fill-hue-rotate-<degrees> |
| Stroke | stroke-hue-rotate-<degrees> | -stroke-hue-rotate-<degrees> |
| Outline | outline-hue-rotate-<degrees> | -outline-hue-rotate-<degrees> |
| Accent | accent-hue-rotate-<degrees> | -accent-hue-rotate-<degrees> |
| Border | border-hue-rotate-<degrees> | -border-hue-rotate-<degrees> |
Color space support
Append a modifier: bg-hue-rotate-90/oklch, bg-hue-rotate-90/hsl, etc. Default is oklch. Each column below shows base → +60° → +120° → +180° → +240° → +300°.
Perceptual polar
Perceptual rectangular
Legacy
RGB family
Device-independent
Sixteen spaces, not the seventeen the other transforms get. There is no bg-hue-rotate-*/color-mix, because color-mix() blends toward a second color and a rotation has none to offer. Lightness can aim at white or black, saturation can aim at gray, but the color a rotation lands on is the answer you are asking for, so you would have to know it before you could name it. See the Color Spaces reference for what each space is and when to choose one.
How rotation works per space
Polar spaces (oklch, lch, hsl, hwb). Adds degrees to the hue channel directly. The simplest and most predictable.
Lab spaces (oklab, lab). Rotates the (a, b) chromatic plane trigonometrically: a' = a·cos(θ) − b·sin(θ), b' = a·sin(θ) + b·cos(θ). Preserves chroma exactly.
RGB-family. Applies a luma-preserving 3×3 color matrix (same algorithm as SVG's feColorMatrix type="hueRotate"). Maintains perceived brightness.
XYZ-family. Rotates (x, z) deviations around the white point, preserving y (luminance).
Applying conditionally
Every hue-rotate utility works with Tailwind's variant prefixes:
<div class="bg-red-500 hover:bg-hue-rotate-180 transition duration-300">
<div class="bg-blue-500 dark:bg-hue-rotate-30">
<div class="bg-blue-500 md:bg-hue-rotate-90"></div>
</div>
</div>Browser support
Built on CSS relative color syntax and registered custom properties. The lab-space modifiers additionally use the cos() and sin() trig functions. Live status for each is at the foot of this page.
Rendering paths
Hue-rotate utilities are plain CSS relative color syntax, and every modern browser evaluates them at render time. How it works covers the mechanism.
Import
<surface>-hue-rotate-* ships in the color-transforms module, alongside lightness and saturation. The three are one pipeline, so they publish as one entry.
Included in @import 'tw-jib-css', or on its own:
@import 'tw-jib-css/color-transforms';Baseline status
What these utilities are built on, live from the Web Platform Dashboard.