Sass color.saturation()

Definition and Usage

color.saturation($color) returns the HSL saturation of a legacy color as a number between 0% and 100%. Global alias: saturation($color).

Official Sass docs mark it deprecated — prefer color.channel($color, "saturation") on Dart Sass 1.79+. Pair with color.hue() and color.lightness() when auditing a full HSL triple.

Syntax

@use "sass:color";

// Deprecated reader
color.saturation(#e1d7d2); // 20%
color.saturation(#f2ece4); // 35%
color.saturation(#dadbdf); // 7.2463768116%

// Prefer today (Dart Sass 1.79+)
color.channel(#e1d7d2, "saturation");
color.channel($c, "saturation", $space: hsl);

Pattern: recognize color.saturation in old files → rewrite with color.channel($c, "saturation").

Migrate to color.channel

Side-by-side mapping:

To change saturation, use writers like color.scale($c, $saturation: …) or color.adjust($c, $saturation: …, $space: hsl) — not the reader. Avoid new saturate() / desaturate() calls.

Related Functions

Prefer color.channel(). Sibling readers: color.hue() / color.lightness(). Change with color.scale() or color.adjust(). Previous: saturate(). Next: transparentize(). Load via @use "sass:color".

SCSS Examples

Examples use color.saturation(). Open View Compiled CSS for verified output (matches official Sass docs samples where noted).

@use "sass:color";

@debug color.saturation(#e1d7d2); // 20%

.swatch {
  --saturation: #{color.saturation(#e1d7d2)};
}

.swatch {
  --saturation: 20%;
}

@use "sass:color";

@debug color.saturation(#f2ece4); // 35%
@debug color.saturation(#dadbdf); // 7.2463768116%

.palette {
  --cream: #{color.saturation(#f2ece4)};
  --cool: #{color.saturation(#dadbdf)};
}

.palette {
  --cream: 35%;
  --cool: 7.2463768116%;
}

@use "sass:color";

.extremes {
  --gray: #{color.saturation(#808080)};
  --navy: #{color.saturation(#036)};
}

.extremes {
  --gray: 0%;
  --navy: 100%;
}

@use "sass:color";

$brand: #e1d7d2;

.report {
  --sat: #{color.saturation($brand)};
  --soft: #{if(color.saturation($brand) < 40%, "soft", "vivid")};
}

.report {
  --sat: 20%;
  --soft: soft;
}

@use "sass:color" as *;

.panel {
  --saturation: #{saturation(#f2ece4)};
}

.panel {
  --saturation: 35%;
}

Sass Support

color.saturation() remains for compatibility. New readers should use color.channel on Dart Sass 1.79+.

Compile with the Dart Sass CLI.

Key Takeaways

Migrate Notes

Practical checklist:

1. Find color.saturation($c) / saturation($c) in legacy SCSS
2. Require Dart Sass 1.79+ for color.channel
3. Replace with color.channel($c, "saturation")
4. Add $space: hsl when reading non-legacy colors
5. Use scale/adjust when you need to write saturation