Sass rgba() Function

What You’ll Learn

rgba() is a global Sass color constructor documented with rgb() / rgba() under Built-In Modules. It creates RGB colors with opacity, or sets a new alpha on an existing color with rgba($color, $alpha). This page covers signatures, the rgb() alias, Level 4 slash syntax, when to prefer color.change(), and five compiled examples.

What Is rgba()?

In CSS, rgba() means “red, green, blue, alpha.” Sass understands the same idea and evaluates it at compile time when the arguments are known numbers or colors.

• rgba(0, 51, 102, 0.5) → rgba(0, 51, 102, 0.5)
• rgba(#6b717f, 0.5) → rgba(107, 113, 127, 0.5)
• rgba(rgba(0, 51, 102, 0.5), 1) → #003366 (fully opaque)

📝 Syntax

No @use is required—rgba() is global (like CSS). Official docs list these equivalent forms (also available as rgb()):

// Classic four channels (alpha optional on rgb)
rgba($red, $green, $blue, $alpha)
rgb($red, $green, $blue, $alpha: 1)

// CSS Color Level 4 slash form (Dart Sass 1.15+)
rgba($red $green $blue / $alpha)
rgb($red $green $blue / $alpha)

// Set alpha on an existing color
rgba($color, $alpha)
rgb($color, $alpha)

Parameters

Return value

🎨 Two Everyday Forms

📋 rgba($c, $a) vs color.change

Both can set opacity on a token. Choose based on style preference and whether you already load sass:color.

@use "sass:color";

$brand: #6b717f;

// Same opacity result
$a: rgba($brand, 0.5);
$b: color.change($brand, $alpha: 0.5);

🛠 Compatibility

This is about Sass compilers, not browsers. When arguments are plain numbers, the compiled CSS contains a finished color—not a Sass call.

Examples Gallery

Examples use global rgba() / rgb(). Open View Compiled CSS for verified Dart Sass output (matches official samples where noted).

@debug rgba(0, 51, 102, 0.5);           // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2);    // rgba(242, 236, 228, 0.2)

.panel {
  background: rgba(0, 51, 102, 0.5);
  border-color: rgba(95%, 92.5%, 89.5%, 0.2);
}

.panel {
  background: rgba(0, 51, 102, 0.5);
  border-color: rgba(242, 236, 228, 0.2);
}

@debug rgb(#f2ece4, 50%);                 // rgba(242, 236, 228, 0.5)
@debug rgba(rgba(0, 51, 102, 0.5), 1);    // #003366

.card {
  --soft: #{rgb(#f2ece4, 50%)};
  --solid: #{rgba(rgba(0, 51, 102, 0.5), 1)};
}

.card {
  --soft: rgba(242, 236, 228, 0.5);
  --solid: #003366;
}

$brand: #c6538c;

.alert {
  color: $brand;
  border: 1px solid rgba($brand, 0.88);
  background: rgba($brand, 0.12);
}

.alert {
  color: #c6538c;
  border: 1px solid rgba(198, 83, 140, 0.88);
  background: rgba(198, 83, 140, 0.12);
}

@use "sass:color";

$grey: #6b717f;

.pair {
  --via-rgba: #{rgba($grey, 0.5)};
  --via-change: #{color.change($grey, $alpha: 0.5)};
}

.pair {
  --via-rgba: rgba(107, 113, 127, 0.5);
  --via-change: rgba(107, 113, 127, 0.5);
}

.overlay {
  // Sass cannot resolve --opacity; it emits the call as written
  background: rgba(0, 51, 102, var(--opacity));
}

.overlay {
  background: rgba(0, 51, 102, var(--opacity));
}

🚀 Real-World Use Cases

• Translucent brand UI — borders, chips, and overlays from one hex token.
• Design-token opacity — rgba($primary, 0.12) for soft fills.
• Compile-time palettes — generate tints when alpha is known ahead of time.
• Runtime flexibility — keep var(--opacity) inside rgba() for themes.
• Bridge to modules — teach the same idea as color.change(..., $alpha:).

⚠️ Common Pitfalls

• Slash form with variables — prefer commas for $blue / $alpha variables.
• Expecting runtime Sass — changing a CSS variable later does not re-run Sass math on number alphas.
• LibSass limits — no Level 4 slash lists; percent alpha support differs.
• Confusing with opacify — opacify() adds alpha; rgba($c, $a) sets alpha.
• Assuming deprecation — rgba() is a current constructor; deprecated helpers are things like opacify / transparentize.

💡 Best Practices