rgba() is a global Sass color constructor. It builds an RGB color with an alpha channel, or sets a new alpha on an existing color with rgba($color, $alpha).
Official Sass docs list it under Global Functions with rgb() as aliases in modern Dart Sass. It is not deprecated.
rgba(95%, 92.5%, 89.5%, 0.2) → rgba(242, 236, 228, 0.2). rgb(#f2ece4, 50%) / rgba(#f2ece4, 50%) → rgba(242, 236, 228, 0.5). rgba(rgba(0, 51, 102, 0.5), 1) → #003366.
@use required.rgba() stays global so it can extend CSS. For module-style alpha writes, prefer color.change($c, $alpha: …).
// Classic four-channel form
rgba($red, $green, $blue, $alpha)
rgb($red, $green, $blue, $alpha: 1) // same idea in Dart Sass
// CSS Color Level 4 (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)Channels: unitless 0–255 or percentages 0%–100%. Alpha: unitless 0–1 or a percentage (Dart Sass).
Pick a signature by what you already have:
| Need | Prefer |
|---|---|
| RGB + alpha (numbers) | rgba(0, 51, 102, 0.5) |
| Level 4 look (literals) | rgba(0 51 102 / 50%) |
| Channels are variables | rgba($r, $g, $b, $a) — avoid slash form |
| Keep channels, set opacity | rgba($brand, 0.5) or color.change($brand, $alpha: 0.5) |
| Same API, shorter name | rgb(…) — alias in Dart Sass |
Official docs warn that Sass slash rules make rgba($r $g $b / $alpha) awkward when $b or $alpha is a variable. Use commas instead.
Examples use global rgba() / rgb(). Open View Compiled CSS for verified output (matches official Sass docs samples where noted).
rgba()The form most stylesheets still use every day.
.panel {
background: rgba(0, 51, 102, 0.5);
border-color: rgba(107, 113, 127, 0.5);
}0.5 means half-opaque.rgb(0, 51, 102, 0.5) in Dart Sass.Channels can be percentages; alpha stays unitless or percent.
@debug rgba(95%, 92.5%, 89.5%, 0.2); // rgba(242, 236, 228, 0.2)
.cream {
background: rgba(95%, 92.5%, 89.5%, 0.2);
}0.2 keeps the cream translucent.#f2ece4.rgba($color, $alpha) (Official Docs)Keep brand channels; only replace opacity — or restore full opacity.
@debug rgba(#f2ece4, 50%); // rgba(242, 236, 228, 0.5)
@debug rgba(rgba(0, 51, 102, 0.5), 1); // #003366
.overlay {
background: rgba(#f2ece4, 50%);
}
.solid {
color: rgba(rgba(0, 51, 102, 0.5), 1);
}50% → 0.5).1 restores a fully opaque navy.color.change($c, $alpha: 0.5).Same navy at 50% using space + slash syntax.
.panel {
background: rgba(0 51 102 / 50%);
}50% means half-opaque.rgba() for broad support.When channels live in variables, use the comma signature.
$r: 0;
$g: 51;
$b: 102;
$a: 0.75;
.card {
// Prefer commas when any channel is a variable
background: rgba($r, $g, $b, $a);
border-color: rgba($r, $g, $b, 1);
}rgba(…).1 can emit opaque navy as hex.Most rgba() bugs are slash + variables, percent alpha on old compilers, or confusing constructors with writers.
Use rgba($r, $g, $b, $a). The Level 4 slash form is fine for literals.
LibSass expects alpha on rgba() (required) and forbids it on rgb(). Percent alpha needs Dart Sass.
rgba(0 51 102 / var(--opacity)) returns an unquoted string so CSS variables resolve at runtime.
Do not confuse the constructor with deprecated writers like opacify() / transparentize().
rgba() / rgb() are current global constructors. Level 4 space/slash forms need Dart Sass 1.15+.
| API | Status |
|---|---|
rgba() / rgb() (Dart Sass) | Current aliases — all listed signatures |
| Space / slash syntax | Dart Sass 1.15+ |
| Percent alpha | Dart Sass (not LibSass) |
| LibSass / Ruby Sass | Stricter: alpha required on rgba, forbidden on rgb (plus rgba($color, $alpha)) |
color.change($c, $alpha: …) | Module alternative for alpha writes |
Compile with the Dart Sass CLI.
rgb() in modern Dart Sass.One line: use rgba() to build translucent RGB tokens — prefer commas with variables, and color.change when you already live in sass:color.
Practical checklist:
1. Build translucent colors with rgba($r, $g, $b, $a)
2. Use Level 4 rgba(... / $alpha) for literals if you like that look
3. Prefer commas whenever variables are involved
4. Use rgba($color, $alpha) to keep channels and set opacity
5. Or color.change($color, $alpha: ...) inside @use "sass:color"Deprecated fixed saturation increase — prefer color.scale.
8 people found this page helpful