Modern SASS Modules: sass:color and color.adjust()

Modern SASS (Dart SASS 1.23+) reorganised all built-in functions into explicit modules accessed via `@use`. The `sass:color` module replaces the old global functions like `lighten()`, `darken()`, `saturate()`, and `opacify()` with `color.adjust()`, `color.scale()`, `color.change()`, and `color.mix()`. The old global functions still work but are considered legacy and generate deprecation warnings in newer versions. The distinction between `color.adjust()` and `color.scale()` is important. `adjust()` adds or subtracts a fixed amount from a channel: `color.adjust($color, $lightness: 20%)` adds 20 percentage points to the lightness value regardless of the current value. `scale()` moves a channel proportionally toward its maximum or minimum: `color.scale($color, $lightness: 20%)` increases the remaining distance to maximum by 20%, which is gentler and more predictable. `color.change()` sets a channel to an absolute value rather than adjusting relative to the current value. `color.change($color, $alpha: 0.5)` sets opacity to exactly 0.5 regardless of the original opacity. This is useful when you need a specific value rather than a relative adjustment.

Example

// ── sass:color module — modern color manipulation ─────────────────────────────

@use 'sass:color';

$brand: #3498db;

// color.adjust — adds/subtracts fixed amount
$lighter : color.adjust($brand, $lightness:  20%);  // +20pp lightness
$darker  : color.adjust($brand, $lightness: -20%);  // -20pp lightness
$muted   : color.adjust($brand, $saturation: -30%); // less saturated
$warm    : color.adjust($brand, $hue: 30deg);       // shift hue by 30°

// color.scale — proportional adjustment (gentler)
$tint  : color.scale($brand, $lightness:  40%);  // 40% closer to white
$shade : color.scale($brand, $lightness: -30%);  // 30% closer to black
$faded : color.scale($brand, $alpha: -50%);      // 50% more transparent

// color.change — set channel to absolute value
$semi-transparent : color.change($brand, $alpha: 0.6);
$hue-rotated      : color.change($brand, $hue: 200deg);
$max-saturated    : color.change($brand, $saturation: 100%);

// color.mix — blend two colors
$mixed  : color.mix($brand, #ffffff, 70%);  // 70% brand, 30% white
$overlay: color.mix($brand, #000000, 80%);  // 80% brand, 20% black

// ── Generating a full color scale from a single base ──────────────────────────

@function generate-scale($base) {
    @return (
        '50' : color.scale($base, $lightness:  90%),
        '100': color.scale($base, $lightness:  80%),
        '200': color.scale($base, $lightness:  60%),
        '300': color.scale($base, $lightness:  40%),
        '400': color.scale($base, $lightness:  20%),
        '500': $base,
        '600': color.scale($base, $lightness: -20%),
        '700': color.scale($base, $lightness: -40%),
        '800': color.scale($base, $lightness: -55%),
        '900': color.scale($base, $lightness: -70%)
    );
}

$blue-scale: generate-scale(#3498db);

@each $shade, $color in $blue-scale {
    .blue-#{$shade} { background-color: $color; }
}

HTML

Full Editor

Related Resources

SASS / SCSS Reference

Complete tag & property list

SASS / SCSS How-To Guides

Step-by-step practical guides

SASS / SCSS Exercises

Practice what you've learned