Color scale generation in SASS

Introduction

Color scales help create smooth color changes for designs. They make websites look nice and consistent.

When you want buttons to change color smoothly on hover.

To create backgrounds that fade from light to dark.

For charts that show data with different color intensities.

When designing themes that need matching shades of a color.

Syntax

SASS

@function generate-scale($base-color, $steps) {
  $scale: (); 
  $base-lightness: lightness($base-color);
  $step-size: (100% - $base-lightness) / ($steps - 1);
  @for $i from 1 through $steps {
    $lightness: 100% - (($i - 1) * $step-size);
    $color-step: lighten($base-color, $lightness - $base-lightness);
    $scale: append($scale, $color-step, comma);
  }
  @return $scale;
}

This example shows a function to create a list of colors from light to base color.

Use lighten() to make colors lighter step by step.

Examples

This creates 5 shades of blue from light to the base blue color.

SASS

$blue-scale: generate-scale(#007BFF, 5);

This uses the generated scale to make button classes with different background colors.

SASS

@each $color in $blue-scale {
  .btn-#{index($blue-scale, $color)} {
    background-color: $color;
  }
}

Sample Program

This Sass code creates 5 red shades from light to full red. Then it makes 5 boxes with these colors side by side.

SASS

@function generate-scale($base-color, $steps) {
  $scale: (); 
  $base-lightness: lightness($base-color);
  $step-size: (100% - $base-lightness) / ($steps - 1);
  @for $i from 1 through $steps {
    $lightness: 100% - (($i - 1) * $step-size);
    $color-step: lighten($base-color, $lightness - $base-lightness);
    $scale: append($scale, $color-step, comma);
  }
  @return $scale;
}

$red-scale: generate-scale(#ff0000, 5);

@each $color in $red-scale {
  .box-#{index($red-scale, $color)} {
    background-color: $color;
    width: 5rem;
    height: 5rem;
    margin: 0.5rem;
    display: inline-block;
  }
}

Important Notes

Use lighten() and darken() to adjust colors smoothly.

Remember to test color contrast for readability and accessibility.

You can generate scales for any base color by changing the input.

Summary

Color scales create smooth color changes for better design.

Sass functions can generate these scales automatically.

Use generated colors in your CSS classes for consistent styling.