color.mix() returns a color that is a mixture of $color1 and $color2. A larger $weight (default 50%) keeps more of $color1. Load it with @use "sass:color". The global alias is mix().
On Dart Sass 1.79+, optional $method is a color-space name (and for polar spaces you may add a hue method like longer hue). With $method, Sass uses the same algorithm as CSS color-mix() and returns a color in $color1’s space.
If both colors are legacy and $method is omitted, Sass keeps its older opacity-aware mix. Non-legacy colors require $method.
color.mix(#036, #d2e1dd, $method: rgb) → #698aa2. Same pair with $method: oklch yields a different midtone. Polar: $method: oklch longer hue can land at oklch(65% 0.06 240deg).
color-mix().Sass compiles a finished color. CSS color-mix() blends at paint time in the browser.
@use "sass:color";
color.mix(#036, #d2e1dd); // #698aa2 (legacy / historical)
color.mix(#036, #d2e1dd, 75%); // more of #036
color.mix(#036, #d2e1dd, $method: rgb); // CSS algorithm in rgb
color.mix(#036, #d2e1dd, $method: oklch); // perceptual midtone
color.mix($a, $b, $method: oklch longer hue); // polar + hue path
// Global alias
mix(#036, #d2e1dd);Pattern: pick two brand colors → bias with $weight → pass $method when the interpolation space matters (1.79+).
How the knobs fit together:
| Need | Use |
|---|---|
| Even blend (legacy) | color.mix($a, $b) — weight 50% |
| More of first color | color.mix($a, $b, 80%) |
CSS color-mix math (1.79+) | color.mix($a, $b, $method: rgb) / oklch |
| Runtime browser blend | CSS color-mix(in srgb, …) |
| Relative channel change (one color) | color.scale() |
| Weight | Feel |
|---|---|
0% | All $color2 |
50% (default) | Even blend |
100% | All $color1 |
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 see what Dart Sass emits.
Default 50% mix (classic docs pair: deep blue + mint).
@use "sass:color";
@debug color.mix(#036, #d2e1dd); // #698aa2
.swatches {
color: color.mix(#036, #d2e1dd);
background: color.mix(#036, white, 15%);
}50% of each color.#698aa2.#036.Push toward the brand or toward the tint for interactive steps.
@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%);
}Without $method, relative opacity also shapes the blend.
@use "sass:color";
.overlay {
// Half-opaque cream mixed with solid slate
background: color.mix(rgba(242, 236, 228, 0.5), #6b717f);
}$method, missing channels take the other color’s value (CSS rules).$method: RGB vs Oklch (Dart Sass 1.79+)Same two hexes, different interpolation spaces (official docs samples).
@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
);
}#698aa2.color-mix math.longer hue takes the long way around the hue circle.$color1.color-mix() + Global AliasCompile-time tokens next to a runtime CSS mix; module and global names match.
@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);
}color.mix() so it never looks like CSS color-mix().color-mix() stays for runtime / theme-driven blends.Most mix bugs are confusing Sass with CSS color-mix, skipping $method on modern colors, or assuming every space yields the same midtone.
$methodoklch / lab / color() inputs require an explicit interpolation method on Dart Sass 1.79+.
Same weight, different $method can produce different blends. Pick the space on purpose.
color-mix()Sass finishes at compile time. CSS blends in the browser. Prefer module color.mix() naming.
$color180% means more of the first argument — swap the order if the bias feels inverted.
This is about Sass compilers, not browsers. Compiled CSS receives a finished color (unless you intentionally emit CSS color-mix()).
| Feature | Status |
|---|---|
@use "sass:color" / color.mix | Dart Sass 1.23+ |
$weight (0%–100%) | Widely available |
$method (CSS algorithm) | Dart Sass 1.79+ |
Global mix() | Older compilers / legacy SCSS |
| LibSass / Ruby Sass | No modern module / $method API |
Compile with the Dart Sass CLI.
$weight keeps more of $color1.$method (1.79+) uses CSS color-mix math; required for non-legacy colors.color.mix() over looking like CSS color-mix().One line: color.mix builds compile-time blends — tune with weight, choose a method on 1.79+.
Conceptual flow:
1. @use "sass:color"
2. Resolve $color1, $color2, and $weight
3. If $method set → CSS color-mix algorithm (1.79+)
4. Else (legacy only) → historical opacity-aware mix
5. Emit a finished CSS color in $color1’s space (with method)Check whether two colors represent the same color across spaces.
8 people found this page helpful