Sass color.opacity() Function

What You’ll Learn

color.opacity() belongs to the built-in sass:color module (Deprecated Functions, documented with color.alpha()). It returns how opaque a legacy color is as a number from 0 to 1 at compile time. This page covers the global opacity() alias, how it differs from the CSS opacity property, its twin color.alpha(), migration to color.channel(), and five compiled examples.

What Is color.opacity()?

Opacity here means the color’s own alpha channel. Official docs: with color.alpha() / opacity(), Sass returns that channel as a number between 0 (invisible) and 1 (solid). The function reads opacity—it does not fade an element like CSS opacity does.

• color.opacity(rgb(210, 225, 221, 0.4)) → 0.4
• color.opacity(#e1d7d2) → 1
• opacity(rgba(#036, 0.5)) → 0.5 (global alias)

📝 Syntax

Load the color module, or use the global alias:

@use "sass:color";

// Deprecated — still works on legacy colors
color.opacity($color)
opacity($color)       // global alias
color.alpha($color)   // same number for a color argument

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

Parameters

Return value

📦 Loading sass:color & Migrating

Official heads-up (shared with alpha): prefer color.channel() in new SCSS because a dedicated opacity reader is redundant.

@use "sass:color";

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

// Same number via the alpha alias
$o: color.alpha(rgba(#036, 0.4)); // 0.4

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

// Global alias (legacy codebases)
$o: opacity(rgba(#036, 0.4));

🎨 Sass opacity() vs CSS opacity

Same English word, different jobs. Mixing them up is a common beginner mistake.

📋 color.opacity vs color.alpha vs channel

🛠 Compatibility

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

Examples Gallery

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

@use "sass:color";

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

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

.mint {
  --opacity: 0.4;
}

@use "sass:color";

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

.swatch {
  --opacity: 1;
}

.panel {
  --opacity: #{opacity(rgba(#036, 0.5))};
}

.panel {
  --opacity: 0.5;
}

@use "sass:color";

.range {
  --zero: #{color.opacity(rgba(3, 51, 102, 0))};
  --mid: #{color.opacity(hsla(210, 100%, 20%, 0.75))};
  --soft: #{color.opacity(rgb(210, 225, 221, 0.4))};
}

.range {
  --zero: 0;
  --mid: 0.75;
  --soft: 0.4;
}

@use "sass:color";

$brand: rgba(#336699, 0.65);

.report {
  --opacity: #{color.opacity($brand)};
  --visible: #{if(color.opacity($brand) > 0.5, "visible", "ghost")};
  --same: #{if(color.opacity($brand) == color.alpha($brand), "alias", "diff")};
}

.report {
  --opacity: 0.65;
  --visible: visible;
  --same: alias;
}

🚀 Real-World Use Cases

• Reading legacy SCSS — recognize opacity($color) in older themes.
• Safe migrations — replace with color.channel($c, "alpha") on Dart Sass 1.79+.
• Token audits — flag translucent brands before shipping CSS variables.
• Conditional mixins — skip shadows when opacity is too low.
• Teaching CSS vs Sass — contrast the function with the CSS opacity property.

⚠️ Common Pitfalls

• Using it in new code — prefer color.channel($c, "alpha").
• Confusing with CSS opacity — the property fades elements; the function reads a color.
• Modern color spaces — $color must be legacy for color.opacity.
• Expecting a color back — this helper reads a number; use adjust / change to write opacity.
• Assuming channel on old Sass — needs 1.79+; keep opacity until you upgrade.

💡 Best Practices