Sass color.saturation() Function

What You’ll Learn

color.saturation() belongs to the built-in sass:color module (Deprecated Functions). It returns a legacy color’s HSL saturation as a number from 0% to 100% at compile time. This page covers the vividness dial, siblings hue / lightness, how it differs from saturate() / desaturate(), migration to color.channel(), and five compiled examples.

What Is color.saturation()?

Saturation is how vivid a color looks on the HSL scale—from gray (0%) through soft pastels to full chroma (100%). Official docs: color.saturation() returns that percent as a number between 0% and 100%. It only reads the value; it does not saturate or desaturate the color.

• color.saturation(#e1d7d2) → 20%
• color.saturation(#f2ece4) → 35%
• color.saturation(#dadbdf) → 7.2463768116%

📝 Syntax

Load the color module, then pass a legacy color:

@use "sass:color";

// Deprecated — still works on legacy colors
color.saturation($color)

// Optional — bring members into scope
@use "sass:color" as *;
saturation($color)

// Recommended migration (Dart Sass 1.79+)
color.channel($color, "saturation")

Parameters

Return value

📦 Loading sass:color & Migrating

Prefer the namespaced form. Bare saturation() only works after @use "sass:color" as *;—otherwise CSS may keep the call as a plain string.

@use "sass:color";

// Old (deprecated, still available)
$s: color.saturation(#e1d7d2); // 20%

// New — preferred on Dart Sass 1.79+
$s: color.channel(#e1d7d2, "saturation");

// Optional global-style import
@use "sass:color" as *;
$s: saturation(#e1d7d2);

🎨 HSL Trio: Hue, Saturation, Lightness

Official docs also list color.hue() and color.lightness() the same way (deprecated readers for the other two HSL channels). Together they rebuild the classic hsl(h, s, l) triple from any legacy color.

• Saturation 0% → gray (no chroma; hue is powerless)
• Saturation near 50% → clear color without max punch
• Saturation 100% → fully vivid on the HSL scale

📋 color.saturation vs color.channel

🛠 Compatibility

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

Examples Gallery

Examples use color.saturation(). Open View Compiled CSS for verified output (matches official Sass docs samples where noted; cream uses the verified 35% from Dart Sass).

@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 {
  --white: #{color.saturation(white)};
  --black: #{color.saturation(black)};
  --red: #{color.saturation(#f00)};
}

.extremes {
  --white: 0%;
  --black: 0%;
  --red: 100%;
}

@use "sass:color";

.compare {
  --soft: #{color.saturation(#e1d7d2)};
  --mint: #{color.saturation(#d2e1dd)};
  --mid: #{color.saturation(#6b717f)};
  --navy: #{color.saturation(#0e4982)};
  --deep: #{color.saturation(#036)};
  --brand: #{color.saturation(#336699)};
}

.compare {
  --soft: 20%;
  --mint: 20%;
  --mid: 8.547008547%;
  --navy: 80.5555555556%;
  --deep: 100%;
  --brand: 50%;
}

@use "sass:color" as *;

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

.panel {
  --saturation: 20%;
}

🚀 Real-World Use Cases

• Reading legacy SCSS — recognize color.saturation in older HSL workflows.
• Safe migrations — replace with color.channel($c, "saturation") on Dart Sass 1.79+.
• Token audits — sort accents by vividness before saturate / desaturate.
• Conditional mixins — skip saturate when saturation is already above 80%.
• Teaching HSL — show why soft colors clamp to gray under fixed desaturate.

⚠️ Common Pitfalls

• Using it in new code — prefer color.channel($c, "saturation").
• Confusing with saturate() — saturation reads; saturate writes a new color.
• Bare saturation() without as * — may compile as a CSS function string.
• Modern color spaces — $color must be legacy for color.saturation.
• Expecting a color back — this helper reads a percent; use scale/adjust to change.

💡 Best Practices