The Color Module
Transform colors with sass:color for themes and states.
Syntax
@use 'sass:color'; color.scale($c, $lightness: -20%)The sass:color module transforms colors — perfect for hover states and generating palettes from a single brand color.
Key functions
color.adjust()— add/subtract fixed amounts from channels.color.scale()— change channels by a percentage of their range (smoother than adjust for lightening/darkening).color.mix($a, $b, $weight)— blend two colors.color.channel($c, 'lightness', $space: hsl)— read a channel.
Example
@use 'sass:color';
$brand: #CC6699;
.btn {
background: $brand;
&:hover { background: color.scale($brand, $lightness: -12%); }
&:active { background: color.scale($brand, $lightness: -20%); }
}
.btn--tint { background: color.mix($brand, white, 15%); }When to use it
- A theme generator derives all tints and shades from one base hex color using color.adjust() in a loop, removing the need for hand-picked palettes.
- A developer uses color.mix() to blend a brand color with white or black for accessible button states rather than guessing hex values.
- A mixin automatically computes a readable label color (black or white) from a background token by checking color.lightness() at compile time.
More examples
Adjusting color channels
Uses color.adjust() to darken the brand color for hover/active states and reduce its alpha for a translucent focus ring.
@use 'sass:color';
$brand: #2563eb;
.btn {
background: $brand;
&:hover { background: color.adjust($brand, $lightness: -8%); }
&:active { background: color.adjust($brand, $lightness: -14%); }
&:focus { outline-color: color.adjust($brand, $alpha: -0.5); }
}Mixing colors for tints
Generates five tint classes by mixing the primary color with white at different percentages using color.mix().
@use 'sass:color';
$primary: #2563eb;
$steps: 10, 30, 50, 70, 90;
@each $pct in $steps {
.primary-tint-#{$pct} {
background: color.mix(white, $primary, $pct);
}
}Checking lightness for auto contrast
A function reads the background's lightness and returns black or white text to ensure readable contrast automatically.
@use 'sass:color';
@function auto-text($bg) {
@if color.lightness($bg) > 50% {
@return #111;
} @else {
@return white;
}
}
.badge-success {
$bg: #16a34a;
background: $bg;
color: auto-text($bg);
}
Discussion