Colour Functions

Manipulate colours with SASS — lighten, darken, mix, adjust hue, saturation, and create colour palettes automatically.

Colour Functions

SASS has powerful built-in colour functions that let you manipulate colours mathematically. Generate entire palettes from a single brand colour!

Lighten and Darken

$primary: #3498db;

.button {
    background: $primary;

    &:hover {
        background: darken($primary, 10%);   // Darker shade
    }

    &:active {
        background: darken($primary, 20%);   // Even darker
    }
}

.card-header {
    background: lighten($primary, 30%);  // Light tint
    color: darken($primary, 25%);        // Dark text
}

Generate a Shade Palette

$brand: #e74c3c;

// Auto-generate 5 shades:
$brand-lightest: lighten($brand, 30%);  // Very light tint
$brand-light: lighten($brand, 15%);     // Light tint
$brand-base: $brand;                     // Base colour
$brand-dark: darken($brand, 15%);       // Dark shade
$brand-darkest: darken($brand, 30%);    // Very dark shade

Saturate and Desaturate

$color: #3498db;

saturate($color, 20%);    // More vivid
desaturate($color, 20%);  // More muted / washed out
grayscale($color);         // Fully desaturated (grey)

Adjust Hue

$primary: #3498db;  // Blue

// Rotate the hue on the colour wheel:
$complementary: adjust-hue($primary, 180deg);  // Orange (opposite)
$triadic-1: adjust-hue($primary, 120deg);       // Green-ish
$triadic-2: adjust-hue($primary, 240deg);       // Red-ish

Mix Colours

$color-a: #3498db;  // Blue
$color-b: #e74c3c;  // Red

mix($color-a, $color-b);       // 50/50 blend → purple
mix($color-a, $color-b, 75%);  // 75% blue, 25% red
mix($color-a, $color-b, 25%);  // 25% blue, 75% red

// Create tints and shades by mixing with white/black:
mix(white, $primary, 80%);  // Very light tint (like lighten)
mix(black, $primary, 80%);  // Very dark shade (like darken)

RGBA and Opacity

$color: #3498db;

rgba($color, 0.5);         // rgba(52, 152, 219, 0.5)
rgba($color, 0.1);         // rgba(52, 152, 219, 0.1) — for subtle backgrounds
opacify($color, 0.3);      // Make more opaque
transparentize($color, 0.3); // Make more transparent

Colour Inspection

$color: #3498db;

red($color);          // 52
green($color);        // 152
blue($color);         // 219
hue($color);          // 204deg
saturation($color);   // 72%
lightness($color);    // 53%
alpha($color);        // 1

Practical: Theme Generator

// Generate an entire colour palette from one colour!
$brand: #6c5ce7;

$colors: (
    primary: $brand,
    primary-light: lighten($brand, 15%),
    primary-dark: darken($brand, 15%),
    primary-bg: lighten($brand, 35%),
    primary-border: lighten($brand, 25%),
    secondary: adjust-hue($brand, 180deg),
    text-on-primary: if(lightness($brand) > 50%, #333, white),
);

// Use the map:
@each $name, $value in $colors {
    .color-#{$name} {
        color: $value;
    }
    .bg-#{$name} {
        background-color: $value;
    }
}

Contrast-Aware Text

@function text-color($bg) {
    @if (lightness($bg) > 55%) {
        @return #333;   // Dark text for light backgrounds
    } @else {
        @return white;  // White text for dark backgrounds
    }
}

.card-primary {
    background: $primary;
    color: text-color($primary);  // Automatically picks white
}

.card-light {
    background: #f8f9fa;
    color: text-color(#f8f9fa);   // Automatically picks #333
}

All Colour Functions

Function	What It Does
`lighten($color, %)`	Makes lighter
`darken($color, %)`	Makes darker
`saturate($color, %)`	Makes more vivid
`desaturate($color, %)`	Makes more muted
`grayscale($color)`	Removes all saturation
`adjust-hue($color, deg)`	Shifts hue on colour wheel
`mix($a, $b, %)`	Blends two colours
`rgba($color, alpha)`	Adds transparency
`complement($color)`	180° hue rotation
`invert($color)`	Inverts the colour

Key Takeaways

lighten() and darken() create shades and tints
mix() blends two colours together
adjust-hue() rotates the colour wheel for complementary/triadic colours
Generate entire palettes from a single brand colour
Use colour functions for hover states, backgrounds, and borders
lightness() helps pick accessible text colours automatically