Mix function for blending in SASS

Introduction

The mix() function helps you blend two colors together. It creates a new color that is a mix of both, making your designs smooth and balanced.

When you want to create a color between two existing colors for a gradient or hover effect.

To soften a bright color by mixing it with white or black.

When you need a consistent color palette by blending brand colors.

To create subtle color variations for shadows or highlights.

When designing themes that require color adjustments without picking new colors manually.

Syntax

SASS

mix($color1, $color2, [$weight])

$color1 and $color2 are the two colors you want to blend.

$weight is optional and controls how much of $color1 is in the mix. It is a percentage from 0% to 100%. Default is 50%.

Examples

Mixes red and blue equally, resulting in purple.

SASS

mix(red, blue)

Mixes 25% red with 75% blue, making a mostly blue-purple color.

SASS

mix(red, blue, 25%)

Mixes 75% red with 25% blue using hex colors.

SASS

mix(#ff0000, #0000ff, 75%)

Sample Program

This example blends red and blue equally to create a purple color. The purple color is used as the background of a square box with text inside. The box is centered and styled for clear visibility.

SASS

@use 'sass:color';

$color1: #ff0000; // bright red
$color2: #0000ff; // bright blue

$blended-color: color.mix($color1, $color2, 50%);

.my-box {
  width: 10rem;
  height: 10rem;
  background-color: $blended-color;
  border: 0.2rem solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-family: sans-serif;
}

// HTML part:
// <div class="my-box">Mixed Color</div>

Important Notes

The mix() function works best with colors in any CSS-supported format (named colors, hex, rgb, hsl).

If you omit the $weight, it defaults to 50%, mixing colors evenly.

Use browser DevTools to inspect the resulting color and tweak the $weight for perfect blending.

Summary

mix() blends two colors into one new color.

You can control how much of each color appears using the $weight parameter.

This helps create smooth color transitions and consistent design palettes.