> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Saturate

> Use the bundled saturation utilities to reduce or amplify color intensity.

export const FilterSaturateDemo = () => {
  const levels = [{
    cls: "saturate-0",
    val: "0"
  }, {
    cls: "saturate-50",
    val: "0.5"
  }, {
    cls: "saturate-100",
    val: "1"
  }, {
    cls: "saturate-150",
    val: "1.5"
  }, {
    cls: "saturate-200",
    val: "2"
  }];
  const imgSrc = "data:image/svg+xml," + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"><defs><linearGradient id="a" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#38bdf8"/><stop offset="33%" stop-color="#a855f7"/><stop offset="66%" stop-color="#ec4899"/><stop offset="100%" stop-color="#f97316"/></linearGradient></defs><rect width="400" height="300" fill="url(#a)"/><circle cx="80" cy="220" r="50" fill="rgba(255,255,255,0.15)"/><circle cx="300" cy="80" r="70" fill="rgba(255,255,255,0.1)"/></svg>');
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-5 gap-4">
          {levels.map(l => <div key={l.cls} className="flex flex-col items-center gap-2">
              <span className="tw-label">{l.cls}</span>
              <div className="rounded-lg overflow-hidden" style={{
    width: "100%",
    aspectRatio: "4/3"
  }}>
                <img src={imgSrc} alt="" style={{
    width: "100%",
    height: "100%",
    objectFit: "cover",
    filter: "saturate(" + l.val + ")"
  }} />
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};

## 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

<FilterSaturateDemo />

### Markup

```html theme={null}
<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.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Brightness" icon="brightness" href="/filters/brightness">
    Balance intensity with overall lightness
  </Card>

  <Card title="Hue Rotate" icon="palette" href="/filters/hue-rotate">
    Shift the hue family after adjusting saturation
  </Card>
</CardGroup>