Sass color.alpha() Function

What You’ll Learn

color.alpha() belongs to the built-in sass:color module (Deprecated Functions). It returns a color’s opacity as a number from 0 to 1 at compile time. This page covers the opacity() alias, the IE alpha(opacity=…) special case, the legacy-color rule, migration to color.channel(), and five compiled examples.

What Is color.alpha()?

Alpha means opacity. Official docs: color.alpha() returns the alpha channel of $color as a number between 0 (fully transparent) and 1 (fully opaque). It does not change the color—it only reads how see-through it is.

• color.alpha(#e1d7d2) → 1 (opaque hex)
• color.opacity(rgb(210, 225, 221, 0.4)) → 0.4
• color.alpha(rgba(3, 51, 102, 0)) → 0

📝 Syntax

Load the color module, or use the global aliases:

@use "sass:color";

// Deprecated — still works on legacy colors
color.alpha($color)
opacity($color)   // global alias
alpha($color)     // global alias

// Recommended migration (Dart Sass 1.79+)
color.channel($color, "alpha")

Parameters

Return value

📦 Loading sass:color & Migrating

Official heads-up: because color.alpha() is redundant with color.channel(), prefer the channel reader in new SCSS.

@use "sass:color";

// Old (deprecated, still available)
$a: color.alpha(rgba(#036, 0.4)); // 0.4

// New — preferred on Dart Sass 1.79+
$a: color.channel(rgba(#036, 0.4), "alpha"); // 0.4

// Global aliases (legacy codebases)
$a: opacity(rgba(#036, 0.4));
$a: alpha(rgba(#036, 0.4));

🎨 The IE alpha(opacity=…) Special Case

Official docs call out a historical quirk: global alpha(opacity=20) does not read a color. Sass supports the old Internet Explorer filter syntax and returns an unquoted string alpha(opacity=20).

• Useful only when emitting legacy IE filter / -ms-filter CSS.
• Do not confuse it with color.alpha($color), which returns 0–1.
• New projects should avoid IE filter strings entirely.

📋 color.alpha vs color.channel

Same number for opacity—different futures.

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a finished number or string—no color.alpha() call remains at runtime.

Examples Gallery

Examples use color.alpha() / opacity() where noted. Open View Compiled CSS for verified output (matches official Sass docs samples).

@use "sass:color";

@debug color.alpha(#e1d7d2); // 1

.swatch {
  --alpha: #{color.alpha(#e1d7d2)};
}

.swatch {
  --alpha: 1;
}

@use "sass:color";

@debug color.opacity(rgb(210, 225, 221, 0.4)); // 0.4

.mint {
  --alpha: #{color.opacity(rgb(210, 225, 221, 0.4))};
}

.mint {
  --alpha: 0.4;
}

@debug alpha(opacity=20); // alpha(opacity=20)

.legacy-ie {
  filter: #{alpha(opacity=20)};
}

.legacy-ie {
  filter: alpha(opacity=20);
}

@use "sass:color";

.range {
  --zero: #{color.alpha(rgba(3, 51, 102, 0))};
  --mid: #{color.alpha(hsla(210, 100%, 20%, 0.75))};
  --half: #{opacity(rgba(#036, 0.5))};
}

.range {
  --zero: 0;
  --mid: 0.75;
  --half: 0.5;
}

@use "sass:color";

$brand: rgba(#336699, 0.8);

.report {
  --alpha: #{color.alpha($brand)};
  --opaque: #{if(color.alpha($brand) >= 1, "yes", "no")};
  --half: #{if(color.alpha($brand) < 0.5, "faint", "solid-enough")};
}

.report {
  --alpha: 0.8;
  --opaque: no;
  --half: solid-enough;
}

🚀 Real-World Use Cases

• Reading legacy SCSS — recognize color.alpha / opacity() in older themes.
• Safe migrations — replace with color.channel($c, "alpha") on Dart Sass 1.79+.
• Token audits — flag colors that are fully transparent or nearly opaque.
• Conditional mixins — skip shadows or borders when alpha is too low.
• IE maintenance only — understand alpha(opacity=…) when editing old filter CSS.

⚠️ Common Pitfalls

• Using it in new code — prefer color.channel($c, "alpha").
• Confusing IE syntax — alpha(opacity=20) is a string, not 0.2.
• Modern color spaces — $color must be legacy for color.alpha.
• Expecting a color back — this helper reads a number; use adjust / change to write opacity.
• Assuming channel on old Sass — needs 1.79+; keep alpha until you upgrade.

💡 Best Practices