Skip to main content

Documentation Index

Fetch the complete documentation index at: https://skelementorcss.com/llms.txt

Use this file to discover all available pages before exploring further.

​
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