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.

Practice

1. What does the mix() function in Sass do?

easy

A. It converts a color to grayscale.

B. It creates a gradient between two colors.

C. It changes the opacity of a color.

D. It blends two colors into a new color based on a weight.

Solution

1. Step 1: Understand the purpose of mix()

   The mix() function combines two colors into one by blending them.

2. Step 2: Recognize the role of the weight parameter

   The weight controls how much of each color is used in the blend, creating a new color.

3. Final Answer:

   It blends two colors into a new color based on a weight. -> Option D

4. Quick Check:

   mix() blends colors = It blends two colors into a new color based on a weight. [OK]

Hint: Remember mix() blends colors using weight [OK]

Common Mistakes:

• Confusing mix() with gradient creation
• Thinking mix() changes opacity only
• Assuming mix() converts colors to grayscale

2. Which of the following is the correct syntax to blend 70% red with 30% blue using mix() in Sass?

easy

A. mix(red, blue, 70%)

B. mix(blue, red, 30%)

C. mix(red, blue, 70)

D. mix(red, blue weight: 70%)

Solution

1. Step 1: Identify the correct parameter order

   The mix() function takes two colors first, then the weight as a percentage.

2. Step 2: Confirm the weight meaning

   The weight is the percentage of the first color in the blend, so 70% means mostly red.

3. Final Answer:

   mix(red, blue, 70%) -> Option A

4. Quick Check:

   mix(color1, color2, weight%) = mix(red, blue, 70%) [OK]

Hint: Weight is percent of first color in mix() [OK]

Common Mistakes:

• Swapping color order and weight
• Using decimal instead of percentage
• Adding named parameters incorrectly

3. What color will result from mix(#ff0000, #0000ff, 50%) in Sass?

medium

A. #800080 (purple)

B. #ff007f (pinkish red)

C. #7f007f (dark purple)

D. #000080 (navy blue)

Solution

1. Step 1: Understand the colors and weight

   #ff0000 is red, #0000ff is blue, and 50% weight means equal parts.

2. Step 2: Calculate the blend

   mix() calculates the weighted average of RGB channels. For 50%, it averages red (255,0,0) and blue (0,0,255) to (127.5,0,127.5), which rounds to #7f007f (dark purple), not #800080.

3. Step 3: Correct hex code

   The actual result is #7f007f, which is dark purple, not #800080.

4. Final Answer:

   #7f007f (dark purple) -> Option C

5. Quick Check:

   mix(#ff0000, #0000ff, 50%) = #7f007f [OK]

Hint: mix() averages RGB channels weighted by percentage [OK]

Common Mistakes:

• Confusing hex codes for purple shades
• Assuming pink or navy instead of purple
• Ignoring equal weight meaning

4. Identify the error in this Sass code:

color: mix(red, blue 50%);

medium

A. Missing comma between blue and 50%

B. Weight must be a decimal, not percentage

C. Colors must be variables, not keywords

D. mix() cannot blend red and blue

Solution

1. Step 1: Check the function syntax

   The mix() function requires commas between arguments.

2. Step 2: Spot the missing comma

   Between blue and 50% there is no comma, causing a syntax error.

3. Final Answer:

   Missing comma between blue and 50% -> Option A

4. Quick Check:

   Arguments must be comma-separated [OK]

Hint: Check commas between all mix() arguments [OK]

Common Mistakes:

• Omitting commas between parameters
• Using decimal instead of percentage incorrectly
• Thinking color keywords are invalid

5. You want to create a button background color that is 30% green and 70% yellow using mix(). Which code snippet achieves this correctly?

hard

A. background-color: mix(green, yellow, 60%);

B. background-color: mix(yellow, green, 70%);

C. background-color: mix(green, yellow, 70%);

D. background-color: mix(yellow, green, 30%);

Solution

1. Step 1: Understand weight meaning in mix()

   The weight is the percentage of the first color in the blend.

2. Step 2: Match desired color proportions

   To get 30% green and 70% yellow, yellow must be first with 70% weight.

3. Final Answer:

   background-color: mix(yellow, green, 70%); -> Option B

4. Quick Check:

   Weight = first color percent [OK]

Hint: First color gets the weight percent in mix() [OK]

Common Mistakes:

• Swapping colors and weights
• Assuming weight is second color percent
• Using wrong percentage values