Skip to main content

​
Overview

Saturation utilities are bundled so you can mute or intensify color in imagery without swapping assets. They pair cleanly with contrast, brightness, and other filter helpers.
ClassFilter (CSS)Usage
.saturate-0filter: saturate(0);Fully desaturated (grayscale intensity channel)
.saturate-50filter: saturate(0.5);Half saturation
.saturate-100filter: saturate(1);Neutral / no change (matches preview scale)
.saturate-150filter: saturate(1.5);Boosted color
.saturate-200filter: saturate(2);Strong saturation; use sparingly

​
Example

​
Markup

<img alt="More saturated media" class="saturate-150 rounded-xl" src="poster.jpg"/>

​
Best Practices

  • Use saturate-0 or saturate-50 for muted backgrounds and editorial treatments.
  • Use saturate-150 or saturate-200 sparingly on accent imagery.
  • Pair saturation with contrast or brightness when the image needs both tonal and color adjustments.

Brightness

Balance intensity with overall lightness

Hue Rotate

Shift the hue family after adjusting saturation

Color Effects

Reset or simplify color treatment with grayscale, invert, and sepia

Filters Overview

Review the full shipped filter surface