Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── 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; }
}