Sass color.alpha()

Definition and Usage

color.alpha($color) returns the alpha channel of a legacy color as a number between 0 and 1. Aliases: global alpha($color) and opacity($color) / color.opacity($color).

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.alpha(#e1d7d2);                        // 1
color.opacity(rgb(210, 225, 221, 0.4));      // 0.4
opacity(rgba(#036, 0.5));                    // 0.5

// IE filter echo (global only)
alpha(opacity=20);                           // alpha(opacity=20)

// Prefer today (Dart Sass 1.79+)
color.channel(#e1d7d2, "alpha");             // 1

Pattern: recognize color.alpha / 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: …) or color.change($c, $alpha: …) — not color.alpha.

Related Functions

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

SCSS Examples

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;
}

Sass Support

color.alpha() 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.alpha($c) / opacity($c) in legacy SCSS
2. Require Dart Sass 1.79+ for color.channel
3. Replace with color.channel($c, "alpha")
4. Leave alpha(opacity=…) alone only if IE filters remain
5. Use adjust/change/scale when you need to write alpha