Sass color.opacity()

Definition and Usage

color.opacity($color) returns the alpha channel of a legacy color as a number between 0 and 1. It is an alias of color.alpha($color) (and the global opacity($color) form).

Official Sass docs mark it deprecated — prefer color.channel($color, "alpha") on Dart Sass 1.79+.

Syntax

@use "sass:color";

// Deprecated readers (still work on legacy colors)
color.opacity(rgb(210, 225, 221, 0.4));      // 0.4
color.alpha(#e1d7d2);                        // 1
opacity(rgba(#036, 0.5));                    // 0.5

// Prefer today (Dart Sass 1.79+)
color.channel(rgb(210, 225, 221, 0.4), "alpha"); // 0.4

Pattern: recognize color.opacity / opacity in old files → rewrite with color.channel($c, "alpha").

Migrate to color.channel

Side-by-side mapping:

To change opacity, use writers like color.adjust($c, $alpha: …), color.scale($c, $alpha: …), or color.change($c, $alpha: …) — not color.opacity.

Related Functions

Prefer color.channel(). Twin page: color.alpha(). Adjust alpha with color.adjust() / color.scale(). Deprecated writers: opacify() / transparentize(). Convert spaces with color.to-space().

SCSS Examples

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

@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";

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

.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))};
  --half: #{opacity(rgba(#036, 0.5))};
}

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

@use "sass:color";

$brand: rgba(#336699, 0.8);

// Old: color.opacity($brand)
.report {
  --opacity: #{color.channel($brand, "alpha")};
  --opaque: #{if(color.channel($brand, "alpha") >= 1, "yes", "no")};
}

.report {
  --opacity: 0.8;
  --opaque: no;
}

Sass Support

color.opacity() remains for compatibility. New readers should use color.channel on Dart Sass 1.79+.

Compile with the Dart Sass CLI.

Key Takeaways

Migrate Notes

Practical checklist:

1. Find color.opacity($c) / opacity($c) in legacy SCSS
2. Require Dart Sass 1.79+ for color.channel
3. Replace with color.channel($c, "alpha")
4. Do not confuse with CSS opacity on elements
5. Use adjust/change/scale when you need to write alpha