Sass desaturate() Function

What You’ll Learn

desaturate() is a global Sass helper documented in the sass:color module page (Deprecated Functions). It makes a legacy color less saturated by decreasing HSL saturation by $amount at compile time. This page covers the fixed-amount trap, why the module system skipped it, how it differs from color.scale(), migration to color.adjust(), and five compiled examples.

What Is desaturate()?

Desaturate means “push this color toward gray by lowering saturation.” Official docs: it decreases the HSL saturation of $color by $amount (0%–100%). Hue and lightness stay related; only saturation moves down by a fixed chunk.

• desaturate(#036, 20%) → #0a335c (saturation 100% → 80%)
• desaturate(#f2ece4, 20%) → #eeebe8 (saturation 35% → 15%)
• desaturate(#d2e1dd, 30%) → #dadada (saturation 20% → 0% gray)

📝 Syntax

Call the global function with a legacy color and a percentage:

// Deprecated global (legacy colors only)
desaturate($color, $amount)

// Preferred — relative desaturation
@use "sass:color";
color.scale($color, $saturation: -$amount)

// Same fixed math as desaturate (Dart Sass 1.79+ with $space)
color.adjust($color, $saturation: -$amount, $space: hsl)

Parameters

Return value

📦 Why There Is No color.desaturate()

Official docs: because desaturate() is usually not the best way to make a color less saturated, it is not included in the new module system. You will not find color.desaturate after @use "sass:color".

// Old (deprecated global)
$muted: desaturate(#036, 20%);

@use "sass:color";

// Same fixed subtraction as desaturate
$muted: color.adjust(#036, $saturation: -20%); // works on older Dart Sass too
// Official form (Dart Sass 1.79+):
// color.adjust(#036, $saturation: -20%, $space: hsl)

// Usually better — 20% less saturated relative to the original
$muted: color.scale(#036, $saturation: -20%);

📋 desaturate vs color.scale vs color.adjust

Official docs call out this trap with a soft mint that only has 20% saturation:

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a finished color—no desaturate() call remains at runtime.

Examples Gallery

Examples use deprecated global desaturate() plus modern scale / adjust migrations. Open View Compiled CSS for verified output (matches official Sass docs samples).

// Saturation 100% becomes 80%.
@debug desaturate(#036, 20%); // #0a335c

.button {
  background: #036;
  &.muted {
    background: desaturate(#036, 20%);
  }
}

.button {
  background: #036;
}
.button.muted {
  background: #0a335c;
}

// Saturation 35% becomes 15%.
@debug desaturate(#f2ece4, 20%); // #eeebe8

.card {
  --surface: #f2ece4;
  --quiet: #{desaturate(#f2ece4, 20%)};
}

.card {
  --surface: #f2ece4;
  --quiet: #eeebe8;
}

// #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just
// returns gray.
@debug desaturate(#d2e1dd, 30%); // #dadada

.soft {
  color: desaturate(#d2e1dd, 30%);
}

.soft {
  color: #dadada;
}

@use "sass:color";

// scale() instead makes it 30% less saturated than it was originally.
@debug color.scale(#6b717f, $saturation: -30%); // #6e727c

.report {
  --desaturate: #{desaturate(#d2e1dd, 30%)};
  --scale-mint: #{color.scale(#d2e1dd, $saturation: -30%)};
  --scale-docs: #{color.scale(#6b717f, $saturation: -30%)};
}

.report {
  --desaturate: #dadada;
  --scale-mint: #d4dfdc;
  --scale-docs: #6e727c;
}

@use "sass:color";

// Prefer on Dart Sass 1.79+:
// color.adjust($c, $saturation: -20%, $space: hsl)

.tokens {
  --legacy: #{desaturate(#036, 20%)};
  --adjust: #{color.adjust(#036, $saturation: -20%)};
  --mauve: #{desaturate(#b37399, 25%)};
}

.tokens {
  --legacy: #0a335c;
  --adjust: #0a335c;
  --mauve: #988e94;
}

🚀 Real-World Use Cases

• Reading legacy SCSS — recognize desaturate() in older muted UI themes.
• Safe migrations — swap to color.adjust for identical output, or scale for better UX.
• Teaching HSL — show fixed saturation steps vs relative scaling.
• Audit traps — find desaturate on already-soft colors that collapse to gray.
• Pairing with saturate / grayscale — migrate related helpers in the same pass—see also saturate().

⚠️ Common Pitfalls

• Using it in new code — prefer color.scale (or adjust for same math).
• Expecting color.desaturate() — that name does not exist in sass:color.
• Soft colors + large amounts — easy to clamp to gray unexpectedly.
• Modern color spaces — $color must be legacy for global desaturate.
• Assuming “30% less saturated” means scale — desaturate is fixed subtraction, not relative.

💡 Best Practices