Sass color.change()

Definition and Usage

color.change() sets one or more channels of a color to exact new values and returns a new color. Load it with @use "sass:color". The global alias is change-color().

By default it changes channels in the color’s own space. Pass $space to edit in another space (Dart Sass 1.79+). The result always stays in the original color’s space. Official docs: channels are never clamped for color.change().

Syntax

@use "sass:color";

// RGB — set exact channel
color.change(#6b717f, $red: 100);

// HSL — snap to design-token targets
color.change($brand, $lightness: 30%);
color.change($brand, $saturation: 40%);

// Alpha / hue — absolute values
color.change($brand, $alpha: 0.4);
color.change($brand, $hue: 200deg);

// Modern spaces (Dart Sass 1.79+)
color.change(#998099, $lightness: 30%, $space: oklch);

Pattern: @use "sass:color" → pick channel keywords → pass destination values → use the returned color in CSS.

vs adjust / scale

Three related sass:color writers:

Quick mental model: change = set, adjust = nudge, scale = relative %.

Related Functions

Load with @use "sass:color". Previous writer: color.adjust(). Next reader: color.channel(). Relative shifts: color.scale(). Mix colors with color.mix().

SCSS Examples

Each example uses @use "sass:color". Open View Compiled CSS to see what Dart Sass emits.

@use "sass:color";

@debug color.change(#6b717f, $red: 100); // #64717f

.swatch {
  background: color.change(#6b717f, $red: 100);
}

.swatch {
  background: #64717f;
}

@use "sass:color";

$brand: #336699;

.surface {
  color: color.change($brand, $lightness: 30%);
  background: color.change($brand, $saturation: 40%);
}

.surface {
  color: #264d73;
  background: #3d668f;
}

@use "sass:color";

.overlay {
  color: color.change(#4caf50, $alpha: 0.4);
  outline-color: color.change(#c65353, $hue: 200deg);
}

.overlay {
  color: rgba(76, 175, 80, 0.4);
  outline-color: #53a0c6;
}

@use "sass:color";

$brand: #336699;

.card {
  background: color.change($brand, $lightness: 92%);
  border-color: color.change($brand, $lightness: 40%);
  color: color.change($brand, $lightness: 20%);
}

.card {
  background: #e0ebf5;
  border-color: #336699;
  color: #1a334d;
}

@use "sass:color";

.names {
  --module: #{color.change(#6b717f, $red: 100)};
  --global: #{change-color(#6b717f, $red: 100)};
}

.names {
  --module: #64717f;
  --global: #64717f;
}

Sass Support

sass:color module loading needs Dart Sass. Prefer it for all new color work.

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Conceptual flow:

1. @use "sass:color"
2. Resolve $color into its color space
3. Replace each keyword channel with the exact value
4. Do not clamp (unlike some adjust paths)
5. Return a new color in the original space for CSS