Colors
Store colors and transform them with color functions.
Syntax
@use 'sass:color'; color.scale($c, $lightness: -10%)Sass treats colors as a first-class type. You can write them as hex, rgb(), hsl(), or a keyword, and then transform them with the sass:color module.
Common transforms
color.adjust()— change channels by an amount.color.scale()— change channels by a fluid percentage (recommended for lightening/darkening).color.mix()— blend two colors.
Example
@use 'sass:color';
$brand: #CC6699;
.card {
background: $brand;
border-color: color.scale($brand, $lightness: -15%);
}
.card--muted {
background: color.mix($brand, white, 25%);
}
/* .card border-color -> #ae5782, etc. */When to use it
- A developer derives hover and active states from a single brand color variable using sass:color functions instead of hand-picking three separate hex values.
- A theming system stores one base hue and generates a full 9-step tint/shade scale automatically using color.adjust() in a loop.
- A mixin generates accessible focus rings by darkening the component's accent color by 20% to meet contrast requirements.
More examples
Storing and applying a color
Stores the brand color in a variable and derives the hover state by darkening it 10% without picking a separate hex value.
$brand: #2563eb;
.btn {
background: $brand;
color: white;
}
.btn:hover {
background: darken($brand, 10%);
}Adjusting colors with sass:color
Uses color.adjust() to create lighter backgrounds and darker borders from one source color, keeping the palette coherent.
@use 'sass:color';
$accent: #e74c3c;
.badge {
background: color.adjust($accent, $lightness: 20%);
border: 1px solid color.adjust($accent, $lightness: -10%);
color: color.adjust($accent, $lightness: -30%);
}Generating a tint/shade scale
Loops over lightness offsets to generate a five-step color scale from one base hue using color.adjust().
@use 'sass:color';
$base: #2563eb;
$steps: (90, 70, 50, 30, 10);
@each $l in $steps {
.blue-#{$l} {
background: color.adjust($base, $lightness: $l - 50%);
}
}
Discussion