Sass color.mix() Function

What You’ll Learn

color.mix() belongs to the built-in sass:color module. It blends two colors at compile time. This page covers $weight, optional $method (Dart Sass 1.79+ / CSS color-mix() algorithm), the historical opacity-aware path, how it differs from CSS color-mix(), and five compiled examples.

What Is color.mix()?

Mix means “meet these two colors in the middle—or closer to one side.” Official docs return a color that is a mixture of $color1 and $color2. Design systems use it for hover tints, soft borders, and token ladders from a brand + a neutral.

• color.mix(#036, #d2e1dd) → #698aa2 (50% each)
• color.mix(#036, #d2e1dd, 75%) → #355f84 (more brand)
• color.mix(#036, #d2e1dd, $weight: 25%) → #9eb6bf (more tint)

📝 Syntax

Load the color module, then pass two colors, optional weight, and optional method:

@use "sass:color";

color.mix($color1, $color2, $weight: 50%, $method: null)
// Global alias:
// mix($color1, $color2, $weight: 50%, $method: null)

Parameters

Return value

📦 Loading sass:color

Prefer the module API. Official docs also document the global name mix() for older stylesheets.

// Recommended — namespaced
@use "sass:color";
$mid: color.mix(#036, #d2e1dd);

// Optional — bring members into the current namespace
@use "sass:color" as *;
$mid: mix(#036, #d2e1dd);

// Optional — custom namespace
@use "sass:color" as c;
$mid: c.mix(#036, #d2e1dd);

// Legacy global name
$mid: mix(#036, #d2e1dd);

⚖️ How $weight Works

Official docs: the weight must be between 0% and 100% (inclusive). A larger weight means more of $color1; a smaller weight means more of $color2.

🎨 $method and CSS color-mix() Math

On Dart Sass 1.79+, pass $method as a color space name—and for polar spaces (hsl, hwb, lch, oklch) you may add a hue interpolation method such as longer hue. Official docs: this uses the same algorithm as CSS color-mix().

• Missing channels in the interpolation space take the other color’s corresponding channel.
• The result is always returned in $color1’s color space.
• Example: color.mix(#036, #d2e1dd, $method: rgb) → #698aa2
• Example: color.mix(#036, #d2e1dd, $method: oklch) produces a different midtone than RGB mixing.

📋 Sass color.mix() vs CSS color-mix()

Both blend colors, but they run at different stages of the pipeline.

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a finished color—no color.mix() call remains (unless you intentionally write CSS color-mix() yourself).

Examples Gallery

Examples 1–3 and 5 compile on everyday Dart Sass. Example 4 shows official $method results for Dart Sass 1.79+. Open View Compiled CSS to inspect the output.

@use "sass:color";

@debug color.mix(#036, #d2e1dd); // #698aa2

.swatches {
  color: color.mix(#036, #d2e1dd);
  background: color.mix(#036, white, 15%);
}

.swatches {
  color: #698aa2;
  background: #d9e0e8;
}

@use "sass:color";

$brand: #036;
$tint: #d2e1dd;

.palette {
  --mid: #{color.mix($brand, $tint)};
  --more-brand: #{color.mix($brand, $tint, 80%)};
  --more-tint: #{color.mix($brand, $tint, 20%)};
}

.button:hover {
  background: color.mix($brand, $tint, 65%);
}

.palette {
  --mid: #698aa2;
  --more-brand: #2a567e;
  --more-tint: #a8bec5;
}

.button:hover {
  background: #4a7090;
}

@use "sass:color";

.overlay {
  // Half-opaque cream mixed with solid slate
  background: color.mix(rgba(242, 236, 228, 0.5), #6b717f);
}

.overlay {
  background: rgba(141, 144, 152, 0.75);
}

@use "sass:color";

// Requires Dart Sass 1.79+
@debug color.mix(#036, #d2e1dd, $method: rgb);   // #698aa2
@debug color.mix(#036, #d2e1dd, $method: oklch); // modern midtone

.methods {
  --rgb: #{color.mix(#036, #d2e1dd, $method: rgb)};
  --oklch: #{color.mix(#036, #d2e1dd, $method: oklch)};
}

.polar {
  // Hue interpolation method on a polar space
  color: color.mix(
    oklch(80% 20% 0deg),
    oklch(50% 10% 120deg),
    $method: oklch longer hue
  );
}

.methods {
  --rgb: #698aa2;
  --oklch: rgb(87.864037264, 140.601918773, 154.2876826946);
}

.polar {
  color: oklch(65% 0.06 240deg);
}

@use "sass:color";

.chip {
  // Sass: finished color in the CSS file
  color: color.mix(#036, #d2e1dd);
  --module: #{color.mix(#036, #d2e1dd)};
  --global: #{mix(#036, #d2e1dd)};
}

.chip.is-live {
  // CSS: browser blends at paint time (not a Sass helper)
  background: color-mix(in srgb, #036 50%, #d2e1dd);
}

.chip {
  color: #698aa2;
  --module: #698aa2;
  --global: #698aa2;
}

.chip.is-live {
  background: color-mix(in srgb, #036 50%, #d2e1dd);
}

🚀 Real-World Use Cases

• Hover / active tints — mix brand + surface for interactive states.
• Border / divider softens — blend a strong accent toward white or gray.
• Token ladders — generate 20% / 50% / 80% steps from two seed colors.
• Overlay chips — historical opacity-aware mixes for translucent UI layers.
• Perceptual midtones — use $method: oklch on Dart Sass 1.79+.
• Teaching color math — compare Sass tokens with CSS color-mix().

⚠️ Common Pitfalls

• Reversing weight — bigger % means more of $color1, not more of $color2.
• Confusing CSS color-mix() — runtime CSS syntax is not the Sass helper.
• Using $method on older Dart Sass — needs 1.79+; bare color.mix($a, $b) still works earlier on legacy colors.
• Ignoring opacity — historical mixes factor transparency into the result.
• Expecting the same midtone in every space — rgb and oklch methods can disagree.

💡 Best Practices