Sass color.adjust()

Definition and Usage

color.adjust() increases or decreases one or more channels of a color by fixed amounts and returns a new color. Load it with @use "sass:color". The global alias is adjust-color().

By default it adjusts channels in the color’s own space. Pass $space to adjust in another space (Dart Sass 1.79+). The result always stays in the original color’s space.

Syntax

@use "sass:color";

// RGB
color.adjust(#6b717f, $red: 15);

// HSL (fixed amounts)
color.adjust($brand, $lightness: 10%);
color.adjust($brand, $lightness: -10%);
color.adjust($brand, $hue: 45deg, $space: hsl);

// Alpha
color.adjust($brand, $alpha: -0.2);

// Modern spaces (Dart Sass 1.79+)
color.adjust(lab(40% 30 40), $lightness: 10%, $a: -20);

Pattern: @use "sass:color" → pick channel keywords → add/subtract fixed amounts → use the returned color in CSS.

vs scale / change

Three related sass:color writers:

Legacy migrations (official docs):

Related Functions

Load with @use "sass:color". Next writers: color.change() and color.scale(). Deprecated globals include lighten() and darken(). 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.adjust(#6b717f, $red: 15); // #7a717f

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

.swatch {
  background: #7a717f;
}

@use "sass:color";

$brand: #336699;

.light {
  color: color.adjust($brand, $lightness: 10%);
}

.dark {
  color: color.adjust($brand, $lightness: -10%);
}

.light {
  color: #4080bf;
}

.dark {
  color: #264d73;
}

@use "sass:color";

$brand: #336699;

.panel {
  background: color.adjust($brand, $alpha: -0.2);
  border-color: color.adjust($brand, $alpha: -0.3);
}

.panel {
  background: rgba(51, 102, 153, 0.8);
  border-color: rgba(51, 102, 153, 0.7);
}

@use "sass:color";

$brand: #4caf50;

.chip {
  background: color.adjust($brand, $lightness: -12%);
  color: #fff;
  box-shadow: 0 0 0 4px color.adjust($brand, $alpha: -0.7);
}

.chip:hover {
  background: color.adjust($brand, $lightness: -18%);
  outline-color: color.adjust(#c65353, $hue: -20deg);
}

.chip {
  background: #39843c;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.3);
}

.chip:hover {
  background: #306f33;
  outline-color: #c65379;
}

@use "sass:color";

.names {
  --module: #{color.adjust(#6b717f, $red: 15)};
  --global: #{adjust-color(#6b717f, $red: 15)};
  --muted: #{color.adjust(#c65353, $saturation: -20%)};
}

.names {
  --module: #7a717f;
  --global: #7a717f;
  --muted: #af6a6a;
}

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. Add each keyword delta to the matching channel
4. Clamp channels that leave their native range
5. Return a new color in the original space for CSS