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