Saturate and desaturate in SASS

Introduction

Saturate and desaturate change how vivid or dull a color looks. They help make colors more lively or more gray.

When you want a button to look more colorful on hover.

To make a background color more muted for a calm effect.

To adjust brand colors to match different moods or themes.

When creating color variations for light and dark modes.

Syntax

SASS

color.saturate($color, $amount)
color.desaturate($color, $amount)

$color is the color you want to change.

$amount is how much to increase or decrease saturation, usually in percentages.

Examples

This makes the blue color 20% more colorful.

SASS

$bright-blue: color.saturate(#3498db, 20%);

This makes the red color 30% less colorful, more gray.

SASS

$dull-red: color.desaturate(#e74c3c, 30%);

The button background becomes a more vivid green.

SASS

button {
  background-color: color.saturate(#2ecc71, 15%);
}

The alert text color becomes less vivid yellow.

SASS

alert {
  color: color.desaturate(#f1c40f, 40%);
}

Sample Program

This example shows the original blue color as the page background. Then it shows a box with the color made 30% more colorful and another box with the color made 50% less colorful. You can see how saturation changes the color's vividness.

SASS

@use 'sass:color';

$original-color: #3498db; // blue
$more-saturated: color.saturate($original-color, 30%);
$less-saturated: color.desaturate($original-color, 50%);

body {
  background-color: $original-color;
  color: white;
  font-family: Arial, sans-serif;
  padding: 2rem;
}

.more-saturated {
  background-color: $more-saturated;
  padding: 1rem;
  margin-top: 1rem;
}

.less-saturated {
  background-color: $less-saturated;
  padding: 1rem;
  margin-top: 1rem;
}

Important Notes

Saturation changes how pure or gray a color looks without changing its lightness.

Use small steps (like 10-30%) to avoid colors looking unnatural.

These functions work best with colors in hex, rgb, or named formats.

Summary

Saturate makes colors more vivid.

Desaturate makes colors duller and more gray.

Use them to adjust color moods easily in your styles.