Saturate

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.

Class	Filter (CSS)	Usage
`.saturate-0`	`filter: saturate(0);`	Fully desaturated (grayscale intensity channel)
`.saturate-50`	`filter: saturate(0.5);`	Half saturation
`.saturate-100`	`filter: saturate(1);`	Neutral / no change (matches preview scale)
`.saturate-150`	`filter: saturate(1.5);`	Boosted color
`.saturate-200`	`filter: 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

Getting Started

Concepts

Typography

Layout

Spacing

Sizing

Background

Effects

Filters

Flexbox

Borders

Components

Overview

Example

Markup

Best Practices

Brightness

Hue Rotate

​Overview

​Example

​Markup

​Best Practices

​Related Utilities

Brightness

Hue Rotate

Overview

Example

Markup

Best Practices

Related Utilities