Saturation
Adjust the saturation (chroma) of any color. Positive values increase saturation, negative values desaturate. Works across all color-accepting properties and all 17 color spaces.
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-saturation-<number> | Increase background saturation by n% |
| -bg-saturation-<number> | Decrease background saturation by n% |
| bg-saturation-<number>/<space> | Saturate in a specific color space |
| -bg-saturation-<number>/<space> | Desaturate in a specific color space |
| bg-saturate-<number> | Alias for bg-saturation-<number> |
| bg-desaturate-<number> | Alias for -bg-saturation-<number> |
| bg-saturation-[<value>] | Saturate by an arbitrary amount |
| bg-saturation-(--<var>) | Saturate by a custom property |
| text-saturation-<number> | Adjust text color saturation |
| fill-saturation-<number> | Adjust SVG fill saturation |
| stroke-saturation-<number> | Adjust SVG stroke saturation |
| outline-saturation-<number> | Adjust outline color saturation |
Amount is 0–100, a percentage of the distance to full chroma or grey. bg-saturation-50 moves halfway to full; -bg-saturation-100 reaches greyscale. Every surface takes the same negative prefix and /<space> modifier.
Examples
Saturate and desaturate
Start with a muted color to see the full range:
<div class="bg-slate-400 bg-saturation-40">more vivid</div>
<div class="bg-blue-500 -bg-saturation-60">muted</div>Desaturate text
<span class="text-red-500 -text-saturation-40">muted red text</span>Animate on hover
The saturation amount is a registered @property variable, so it transitions:
<div class="bg-blue-500 hover:-bg-saturation-50 transition duration-700">hover to desaturate</div>Full desaturation scale
Surfaces
| Surface | Saturate | Desaturate | Aliases |
|---|---|---|---|
| Background | bg-saturation-<number> | -bg-saturation-<number> | bg-saturate-<number> bg-desaturate-<number> |
| Text | text-saturation-<number> | -text-saturation-<number> | text-saturate-<number> text-desaturate-<number> |
| Fill | fill-saturation-<number> | -fill-saturation-<number> | fill-saturate-<number> fill-desaturate-<number> |
| Stroke | stroke-saturation-<number> | -stroke-saturation-<number> | stroke-saturate-<number> stroke-desaturate-<number> |
| Outline | outline-saturation-<number> | -outline-saturation-<number> | outline-saturate-<number> outline-desaturate-<number> |
| Accent | accent-saturation-<number> | -accent-saturation-<number> | accent-saturate-<number> accent-desaturate-<number> |
| Border | border-saturation-<number> | -border-saturation-<number> | border-saturate-<number> border-desaturate-<number> |
Every surface has the alias pair, and most people reach for those first: text-desaturate-40 says what it does without the reader having to notice a leading minus. See Aliases.
Color space support
Append a modifier: bg-saturation-30/oklch, -bg-saturation-50/hsl, etc. Default is oklch. Each column below shows base → −20 → −40 → −60 → −80.
Perceptual polar
Perceptual rectangular
Legacy
RGB family
Device-independent
Fallback
See the Color Spaces reference for what each space is and when to choose one.
How scaling works
oklch, lch. Chroma interpolates toward the maximum (saturate) or 0 (desaturate). Lightness holds constant.
oklab, lab. Both chromatic axes (a, b) scale toward their theoretical maxima or toward 0.
HSL. S interpolates toward 100% or 0%.
RGB-family. Each channel moves toward or away from its grayscale luma value (0.213r + 0.715g + 0.072b).
color-mix. Blends toward gray (desaturation) or maximum chroma (saturation) via color-mix() in oklch.
Aliases
<surface>-saturate-* and <surface>-desaturate-* are convenience aliases:
| Alias | Equivalent |
|---|---|
bg-saturate-<number> | bg-saturation-<number> |
bg-desaturate-<number> | -bg-saturation-<number> |
text-saturate-<number> | text-saturation-<number> |
text-desaturate-<number> | -text-saturation-<number> |
fill-saturate-<number> | fill-saturation-<number> |
fill-desaturate-<number> | -fill-saturation-<number> |
stroke-saturate-<number> | stroke-saturation-<number> |
stroke-desaturate-<number> | -stroke-saturation-<number> |
outline-saturate-<number> | outline-saturation-<number> |
outline-desaturate-<number> | -outline-saturation-<number> |
accent-saturate-<number> | accent-saturation-<number> |
accent-desaturate-<number> | -accent-saturation-<number> |
border-saturate-<number> | border-saturation-<number> |
border-desaturate-<number> | -border-saturation-<number> |
Both forms produce identical CSS, and both take the /<space> modifier: border-desaturate-30/lch is -border-saturation-30/lch.
<!-- equivalent -->
<div class="bg-blue-500 -bg-saturation-30">...</div>
<div class="bg-blue-500 bg-desaturate-30">...</div>Applying conditionally
Every saturation utility works with Tailwind's variant prefixes:
<div class="bg-blue-500 hover:-bg-saturation-50 transition duration-300">
<div class="bg-blue-500 dark:-bg-saturation-30">
<div class="bg-blue-500 md:bg-saturation-20"></div>
</div>
</div>Browser support
Built on CSS relative color syntax, registered custom properties, color-mix() and the abs() and sign() math functions. abs() and sign() were the last of those to reach Chromium, so they are what sets the floor here. Live status for each is at the foot of this page.
Rendering paths
Saturation utilities are plain CSS relative color syntax, and every modern browser evaluates them at render time. How it works covers the mechanism.
Import
<surface>-saturation-*, <surface>-saturate-* and <surface>-desaturate-* all ship in the color-transforms module, alongside lightness and hue rotation. 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.