sass:color module

Introduction

The sass:color module helps you change and work with colors easily in your styles. It saves time and keeps your colors consistent.

You want to make a color lighter or darker for hover effects.

You need to find the opposite (complement) color for better contrast.

You want to mix two colors to create a new shade.

You want to change the transparency of a color.

You want to extract parts of a color like its red, green, or blue values.

Syntax

SASS

@use 'sass:color';

color.adjust($color, $red: 0, $green: 0, $blue: 0, $alpha: 0, $hue: 0, $saturation: 0, $lightness: 0)
color.scale($color, $red: 0, $green: 0, $blue: 0, $alpha: 0, $hue: 0, $saturation: 0, $lightness: 0)
color.change($color, $red: null, $green: null, $blue: null, $alpha: null, $hue: null, $saturation: null, $lightness: null)
color.mix($color1, $color2, $weight: 50%)
color.invert($color)
color.alpha($color)
color.red($color)
color.green($color)
color.blue($color)

Always start by importing the module with @use 'sass:color';.

Functions take colors as inputs and return new colors you can use in your CSS.

Examples

This makes the blue color 20% lighter.

SASS

@use 'sass:color';

$light-blue: color.adjust(#0000ff, $lightness: 20%);

This mixes 70% red with 30% blue to create a purple shade.

SASS

@use 'sass:color';

$mix-color: color.mix(#ff0000, #0000ff, $weight: 70%);

This gives the opposite color of #123456.

SASS

@use 'sass:color';

$inverted: color.invert(#123456);

This extracts the transparency value (0.5) from the red color.

SASS

@use 'sass:color';

$alpha-value: color.alpha(rgba(255, 0, 0, 0.5));

Sample Program

This code creates a blue button. When you hover over it, the button color becomes lighter by 15%, making it clear you can click it.

SASS

@use 'sass:color';

$base-color: #3498db;
$hover-color: color.adjust($base-color, $lightness: 15%);

.button {
  background-color: $base-color;
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: $hover-color;
}

Important Notes

Use color.adjust to change brightness or transparency smoothly.

Mixing colors helps create new shades without guessing hex codes.

Remember to use semantic color names for easier maintenance.

Summary

The sass:color module helps you change colors easily.

You can lighten, darken, mix, or invert colors with simple functions.

Using these functions keeps your styles consistent and easy to update.