Sass desaturate()

Beginner
12 min read
Updated: Nov 2026
5 examples
Compiled CSS
Sass desaturate decreasing HSL saturation and migrating to color.scale or color.adjust
Definition

Definition and Usage

desaturate($color, $amount) decreases a legacy color’s HSL saturation by a fixed percentage (0%–100%) and returns a new color. It is a global built-in — there is no color.desaturate().

Deprecated.

Official Sass docs list desaturate() under Deprecated Functions. Fixed subtraction often overshoots (a 20% saturated color desaturated by 30% becomes gray). Prefer color.scale($color, $saturation: -$amount) for relative desaturation, or color.adjust($color, $saturation: -$amount, $space: hsl) to keep the old math.

Official idea.

desaturate(#036, 20%) → #0a335c. But desaturate(#d2e1dd, 30%) → #dadada (gray), while color.scale(#6b717f, $saturation: -30%) → #6e727c.

Legacy colors only.

$color must be in rgb, hsl, or hwb. For modern spaces, use color.scale / color.adjust with an explicit $space. Full mute: color.grayscale().

Syntax

Syntax

SCSS
// Deprecated global
desaturate($color, $amount);

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

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

Pattern: recognize old desaturate → choose scale for design intent or adjust for pixel-matching migrations.

Reference

Migrate to scale / adjust

Official migration paths:

Old / intentPrefer
desaturate($c, $amount) — relative “% quieter”color.scale($c, $saturation: -$amount)
Keep exact old mathcolor.adjust($c, $saturation: -$amount, $space: hsl)
saturate($c, $amount)color.scale($c, $saturation: $amount) or adjust with +$amount
No module formThere is no color.desaturate()

Quick mental model: desaturate = fixed subtract, scale = percent of remaining room, adjust = same fixed math, modern API.

Code

SCSS Examples

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

Example 1 — Saturation 100% → 80% (Official Docs)

A deep navy softens by a fixed 20% saturation.

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

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

How It Works

  1. Subtract 20% from HSL saturation.
  2. Very saturated colors still look fine.
  3. Muted state emits finished hex #0a335c.
  4. Risky when saturation is already low (see Example 3).

Example 2 — Cream Softened by 20% (Official Docs)

Saturation 35% becomes 15%.

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

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

How It Works

  1. Modest fixed step turns warm cream slightly cooler/grayer.
  2. Custom property stores the quiet tone.
  3. In new code, try color.scale(#f2ece4, $saturation: -20%).
  4. Compare the look before locking tokens.

Example 3 — Low Saturation + Large Amount → Gray (Official Docs)

Saturation 20% minus 30% clamps to gray.

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

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

How It Works

  1. #d2e1dd saturation is 20%.
  2. Subtract 30% → below zero → gray #dadada.
  3. You asked for “a bit quieter” and wiped the hue out.
  4. Classic reason official docs discourage desaturate.

Example 4 — Prefer color.scale() (Official Docs)

Relative desaturation keeps tint; compare the gray trap side by side.

SCSS
@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%)};
}

How It Works

  1. Side-by-side shows the trap vs the fix.
  2. desaturate collapses the mint to gray.
  3. scale keeps a soft green-gray tint.
  4. Prefer scale in new SCSS for muted / disabled states.

Example 5 — Preserve Old Math with color.adjust()

Match desaturate(#036, 20%) exactly when migrating.

SCSS
@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%)};
}

How It Works

  1. --legacy and --adjust match — safe visual swap.
  2. Pass $space: hsl on Dart Sass 1.79+ when you can.
  3. Still consider scale when redesigning muted states.
  4. Module form documents where the helper comes from.

Edge Cases & Pitfalls

Most desaturate bugs are fixed math on low-saturation colors, or expecting a module API.

gray

Overshoot → gray

If saturation minus $amount hits 0%, you get gray. Use color.scale instead.

module

No color.desaturate()

After @use "sass:color", call scale or adjust — not color.desaturate.

space

Legacy colors only

oklch / lab colors need modern writers with an explicit $space.

intent

Fixed ≠ relative

desaturate($c, 30%) is not “30% less saturated.” That phrase maps to scale(..., $saturation: -30%).

Toolchain

Sass Support

Global desaturate still compiles, but new work should use the module writers.

FeatureStatus
Global desaturate()Deprecated — still available for legacy SCSS
color.scale(..., $saturation: -…)Preferred relative desaturation
color.adjust(..., $space: hsl)Same fixed math (Dart Sass 1.79+ for $space)
color.desaturate()Does not exist

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • Deprecated: fixed HSL saturation subtraction on legacy colors.
  • Prefer color.scale for “percent less saturated.”
  • Use color.adjust when you must match old pixels.
  • No module form — there is no color.desaturate().

One line: learn desaturate to read legacy SCSS; write scale (or adjust) in new code.

Migrate

Migrate Notes

Conceptual flow:

flow.txt
1. Find desaturate($color, $amount)
2. Want "% quieter"? → color.scale($color, $saturation: -$amount)
3. Need same pixels? → color.adjust($color, $saturation: -$amount, $space: hsl)
4. @use "sass:color"
5. Delete the global desaturate() call

Frequently Asked Questions

desaturate($color, $amount) decreases a legacy color’s HSL saturation by $amount (0%–100%). Example: desaturate(#036, 20%) is #0a335c.
Yes. Official Sass docs list it under Deprecated Functions and omit it from the sass:color module. Prefer color.scale() for relative desaturation, or color.adjust($color, $saturation: -$amount, $space: hsl) to keep the old math.
Because desaturate() is usually not the best way to lower saturation, it is not included in the new module system. Use color.scale or color.adjust instead.
desaturate subtracts a fixed saturation amount (20% saturation − 30% becomes gray). color.scale($c, $saturation: -30%) makes the color 30% less saturated than it was, which is usually what designers want.
No for modern spaces. Official docs require a legacy color space (rgb, hsl, or hwb). Convert first, or use color.scale / color.adjust with an explicit $space.
For the same fixed subtraction: color.adjust($color, $saturation: -$amount, $space: hsl) on Dart Sass 1.79+. For better relative desaturation: color.scale($color, $saturation: -$amount).

Next: Sass color.green()

Read the RGB green channel — prefer color.channel in new code.

color.green() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass darken Function Sass color.green Function