Sass saturate() Function

What You’ll Learn

saturate() is a global Sass helper documented in the sass:color module page (Deprecated Functions). It makes a legacy color more vivid by increasing 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 saturate()?

Saturate means “push this color toward a richer, more vivid look.” Official docs: it increases the HSL saturation of $color by $amount (0%–100%). Hue and lightness stay related; only saturation moves up by a fixed chunk.

• saturate(#c69, 20%) → #e05299 (saturation 50% → 70%)
• saturate(#6b717f, 30%) → #4863a2 (a quieter slate gets punchier)
• saturate(#0e4982, 30%) → #004990 (80% → 100%, fully saturated)

📝 Syntax

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

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

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

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

Parameters

Return value

📦 Why There Is No color.saturate()

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

// Old (deprecated global)
$vivid: saturate(#c69, 20%);

@use "sass:color";

// Same fixed addition as saturate
$vivid: color.adjust(#c69, $saturation: 20%); // works on older Dart Sass too
// Official form (Dart Sass 1.79+):
// color.adjust(#c69, $saturation: 20%, $space: hsl)

// Usually better — 20% more saturated relative to the original
$vivid: color.scale(#c69, $saturation: 20%);

📋 saturate vs color.scale vs color.adjust

Official docs call out this trap with #0e4982 (already 80% saturation):

🛠 Compatibility

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

Examples Gallery

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

// Saturation 50% becomes 70%.
@debug saturate(#c69, 20%); // #e05299

.button {
  background: #c69;
  &:hover {
    background: saturate(#c69, 20%);
  }
}

.button {
  background: #cc6699;
}
.button:hover {
  background: #e05299;
}

@debug saturate(#6b717f, 30%); // #4863a2

.badge {
  --quiet: #6b717f;
  --vivid: #{saturate(#6b717f, 30%)};
}

.badge {
  --quiet: #6b717f;
  --vivid: #4863a2;
}

// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
// fully saturated.
@debug saturate(#0e4982, 30%); // #004990

.deep {
  color: saturate(#0e4982, 30%);
}

.deep {
  color: #004990;
}

@use "sass:color";

// scale() instead makes it 30% more saturated than it was originally.
@debug color.scale(#0e4982, $saturation: 30%); // #0a4986

.deep {
  --saturate: #{saturate(#0e4982, 30%)};
  --scale: #{color.scale(#0e4982, $saturation: 30%)};
}

.deep {
  --saturate: #004990;
  --scale: #0a4986;
}

@use "sass:color";

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

.tokens {
  --legacy: #{saturate(#c69, 20%)};
  --adjust: #{color.adjust(#c69, $saturation: 20%)};
  --brand: #{saturate(#336699, 20%)};
}

.tokens {
  --legacy: #e05299;
  --adjust: #e05299;
  --brand: #1f66ad;
}

🚀 Real-World Use Cases

• Reading legacy SCSS — recognize saturate() in older accent/hover 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 saturate on already-vivid brands that snap to full chroma.
• Pairing with desaturate — both globals are deprecated twins; migrate together.

⚠️ Common Pitfalls

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

💡 Best Practices