Sass color.scale()

Definition and Usage

color.scale() fluidly scales one or more channel properties of a color. Each keyword is a percent from -100% to 100%: positive moves toward the channel’s maximum, negative toward its minimum. Load it with @use "sass:color". Global alias: scale-color().

Example mental model: $lightness: 50% makes a color 50% closer to maximum lightness without jumping fully white. Official docs prefer scale over fixed helpers like lighten / darken / saturate / opacify when you want relative change.

Syntax

@use "sass:color";

// RGB — percent of remaining room toward max/min
color.scale(#6b717f, $red: 15%);

// HSL-style relative moves
color.scale($brand, $lightness: 30%);
color.scale($brand, $lightness: -30%);
color.scale($brand, $saturation: 20%);

// Alpha
color.scale(rgba(#036, 0.7), $alpha: 30%);

// Other space, same origin space returned (Dart Sass 1.79+)
color.scale(#d2e1dd, $lightness: -10%, $space: oklch);
color.scale(oklch(80% 20% 120deg), $chroma: 50%, $alpha: -40%);

Pattern: @use "sass:color" → pick channel keywords as percents → scale toward the bound → use the returned color in CSS.

vs adjust / change

Three related sass:color writers:

Prefer scale when replacing deprecated fixed writers:

Related Functions

Load with @use "sass:color". Sibling writers: color.adjust() and color.change(). Previous: color.same(). Next: color.space(). Convert spaces with color.to-space().

SCSS Examples

Each example uses @use "sass:color". Open View Compiled CSS for verified output (matches official Sass docs samples where noted).

@use "sass:color";

@debug color.scale(#6b717f, $red: 15%); // rgb(129.2, 113, 127)

.swatch {
  background: color.scale(#6b717f, $red: 15%);
}

.swatch {
  background: rgb(129.2, 113, 127);
}

@use "sass:color";

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%); // #002447

.deep {
  color: color.scale(#036, $lightness: -30%);
}

.deep {
  color: #002447;
}

@use "sass:color";

@debug color.scale(rgba(#036, 0.7), $alpha: 30%); // rgba(0, 51, 102, 0.79)

.panel {
  background: color.scale(rgba(#036, 0.7), $alpha: 30%);
}

.panel {
  background: rgba(0, 51, 102, 0.79);
}

@use "sass:color";

@debug color.scale(oklch(80% 20% 120deg), $chroma: 50%, $alpha: -40%);
// oklch(80% 0.24 120deg / 0.6)

.accent {
  color: color.scale(oklch(80% 20% 120deg), $chroma: 50%, $alpha: -40%);
}

.accent {
  color: oklch(80% 0.24 120deg / 0.6);
}

@use "sass:color";

// #e1d7d2 has lightness ~85%, so lighten(..., 30%) becomes white.
// scale() instead makes it 30% lighter than it was originally.
@debug color.scale(#e1d7d2, $lightness: 30%); // #eae3e0

.report {
  --scale: #{color.scale(#e1d7d2, $lightness: 30%)};
}

.report {
  --scale: #eae3e0;
}

Sass Support

Prefer the module form with Dart Sass and @use "sass:color".

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. @use "sass:color"
2. Prefer color.scale for relative theme tweaks
3. Keep keyword args between -100% and 100%
4. Do not mix RGB + HSL/HWB keywords on legacy colors
5. Pass $space on Dart Sass 1.79+ when scaling modern channels