Sass saturate()

Definition and Usage

saturate($color, $amount) increases 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.saturate().

Syntax

// Deprecated global
saturate($color, $amount);

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

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

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

Migrate to scale / adjust

Official migration paths:

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

Related Functions

Preferred writers: color.scale(), color.adjust(). Opposite deprecated helper: desaturate(). Reader: color.saturation() / color.channel($c, "saturation"). Previous: rgba(). Next: color.saturation(). Load modules with @use.

SCSS Examples

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

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

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

.button {
  background: #c69;
}
.button.vivid {
  background: #e05299;
}

// #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

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

.report {
  --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%)};
}

.tokens {
  --legacy: #e05299;
  --adjust: #e05299;
}

$brand: #c69;

.link {
  color: $brand;
  &:hover {
    color: saturate($brand, 20%);
  }
}

.link {
  color: #c69;
}
.link:hover {
  color: #e05299;
}

Sass Support

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

Compile with the Dart Sass CLI.

Key Takeaways

Migrate Notes

Conceptual flow:

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