Sass Color Functions — Manipulating and Generating Colors

In this tutorial, you will learn about Sass Color Functions. We cover key concepts, practical examples, and best practices to help you master this topic.

Sass color functions manipulate color channels through HSL, RGB, and alpha adjustments for creating color systems, hover effects, and accessible contrast ratios.

What You'll Learn

You will learn how to use color functions for hue rotation, saturation adjustment, lightness modification, alpha transparency, and generating complete color palettes.

Why It Matters

Color functions enable systematic theming. DodaTech generates entire color palettes from 3 base colors using Sass color functions.

Real-World Use

Durga Antivirus Pro's theme system generates 8 shades each for primary, success, danger, and warning colors from a single base value per color.

flowchart LR
    A[Built-in Functions] --> B[Color Functions]
    B --> C[HSL Adjustments]
    B --> D[Alpha]
    B --> E[Mixing]
    B --> F[Palettes]
    style B fill:#c69,stroke:#c69,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

HSL Color Adjustments

$base: #7c3aed;

// Adjust individual HSL channels
.hue-shifted {
  background: adjust-hue($base, 45deg);     // Shift hue by 45 degrees
}

.more-saturated {
  background: saturate($base, 20%);         // Increase saturation
}

.less-saturated {
  background: desaturate($base, 30%);       // Decrease saturation
}

.light {
  background: lighten($base, 25%);          // Increase lightness
}

.dark {
  background: darken($base, 15%);           // Decrease lightness
}

Expected output: Color variations with different HSL adjustments.

Color Module (Modern Approach)

@use "sass:color";

$base: #7c3aed;

// Using the color module
.lighter {
  background: color.adjust($base, $lightness: 20%);
}

.darker {
  background: color.adjust($base, $lightness: -15%);
}

.more-saturated {
  background: color.adjust($base, $saturation: 15%);
}

// Scale adjusts proportionally
.scale-lighter {
  background: color.scale($base, $lightness: 30%);
}

Expected output: Color adjustments using the modern sass:color module. The scale function adjusts proportionally to avoid clamping.

Alpha Transparency

$primary: #7c3aed;

.solid {
  background: $primary;
}

.half {
  background: rgba($primary, 0.5);
}

.quarter {
  background: rgba($primary, 0.25);
}

// Opacify and transparentize
.more-opaque {
  background: opacify(rgba($primary, 0.5), 0.3); // 0.8 opacity
}

.more-transparent {
  background: transparentize($primary, 0.3); // 0.7 opacity
}

Expected output: Colors at different opacity levels.

Mixing Colors

$primary: #7c3aed;
$secondary: #f59e0b;

.fifty-fifty {
  background: mix($primary, $secondary, 50%); // Equal blend
}

.more-primary {
  background: mix($primary, $secondary, 75%); // Mostly primary
}

.more-secondary {
  background: mix($primary, $secondary, 25%); // Mostly secondary
}

// Tint and shade using mix
@function tint($color, $weight) {
  @return mix(white, $color, $weight);
}

@function shade($color, $weight) {
  @return mix(black, $color, $weight);
}

.tinted {
  background: tint($primary, 30%); // Tinted with white
}

.shaded {
  background: shade($primary, 30%); // Shaded with black
}

Expected output: Blended and tinted/shaded color variations.

Generating a Color Palette

@use "sass:color";

@function palette($base, $steps: 10) {
  $result: ();
  @for $i from 1 through $steps {
    $lightness: ($i - 1) * (100% / ($steps - 1));
    $result: append($result, color.mix($base, if($i < $steps / 2, black, white), $lightness));
  }
  @return $result;
}

$primary-palette: palette(#7c3aed, 8);
// Generates 8 shades from dark to light

Expected output: A list of 8 color shades from dark to light based on the base color.

Contrast Checking

@use "sass:color";

@function contrast-text($bg-color, $dark: #1a202c, $light: white) {
  $luminance: (color.red($bg-color) * 0.299 +
               color.green($bg-color) * 0.587 +
               color.blue($bg-color) * 0.114) / 255;
  @return if($luminance > 0.5, $dark, $light);
}

.card-primary {
  background: #7c3aed;
  color: contrast-text(#7c3aed); // Returns white (dark bg)
}

.card-light {
  background: #f8fafc;
  color: contrast-text(#f8fafc); // Returns dark text
}

Expected output: Text colors that provide sufficient contrast against their backgrounds.

Common Mistakes

1. Using lighten/darken Over the Modern Module

lighten and darken are deprecated in favor of color.adjust. Use the sass:color module for new projects.

2. Forgetting Alpha Channel Adjustments

Adjusting lightness on a semi-transparent color affects perception. Consider RGBA adjustments first.

3. Color Blindness Accessibility

HSL adjustments do not account for color vision deficiency. Test generated palettes with accessibility tools.

4. Over-Adjusting Causing Clamping

Adjustments beyond 0% or 100% clamp. Use color.scale for proportional adjustments that respect bounds.

5. Not Testing Contrast Ratios

Generated colors may not meet WCAG contrast ratios. Always verify text-on-background combinations.

Practice Questions

1. What function adjusts the hue of a color? adjust-hue($color, $degrees) rotates the hue, or color.adjust($color, $hue: 45deg).

2. How do you make a color semi-transparent? rgba($color, 0.5) or transparentize($color, 0.5).

3. What is the difference between adjust and scale? adjust adds a fixed amount. scale adjusts by a proportion of the remaining distance to the limit.

4. How do you mix two colors equally? mix($color1, $color2, 50%) blends both colors evenly.

5. How do you determine if text should be light or dark on a background? Calculate relative luminance and choose white for dark backgrounds, dark for light backgrounds.

Challenge

Create a complete color system from 3 base colors (primary, secondary, accent). Generate 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 shade scale for each. Ensure the 500 value matches the base.

FAQ

Mini Project

Build a theme generator that accepts a base primary color and generates: 10 shades for the palette, hover/active states, disabled state, success (green derived from primary hue + 120deg), and warning (primary hue + 60deg).

What's Next

Learn Sass Math Functions for advanced calculations. Then explore Sass List Functions for data manipulation.