Sass rgb() Function

What You’ll Learn

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

What Is rgb()?

In CSS, rgb() means “red, green, blue.” Sass evaluates it at compile time when the arguments are known numbers or colors, so your stylesheet can use the same familiar constructor designers know from CSS.

• rgb(0 51 102) → rgb(0, 51, 102) (often written #036 in docs)
• rgb(95%, 92.5%, 89.5%) → rgb(242, 236, 228)
• rgb(#f2ece4, 50%) → rgba(242, 236, 228, 0.5)

📝 Syntax

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

// 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)

Parameters

Return value

🎨 Classic Commas vs Level 4 Slash

Modern CSS (and Dart Sass 1.15+) allows space-separated channels and a slash before alpha. Both styles compile to the same colors.

📋 rgb() vs rgba()

In modern Dart Sass they are aliases. Pick the name that matches your team’s habit; the math is the same. See the dedicated rgba() page for opacity-first examples.

🔍 rgb($c, $a) vs color.change

@use "sass:color";

$brand: #6b717f;

$a: rgb($brand, 0.5);
$b: color.change($brand, $alpha: 0.5); // same opacity

🛠 Compatibility

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

Examples Gallery

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

@debug rgb(0 51 102);              // #036 (docs) / rgb(0, 51, 102)
@debug rgb(95%, 92.5%, 89.5%);     // #f2ece4 (docs) / rgb(242, 236, 228)

.hero {
  color: rgb(0 51 102);
  background: rgb(95%, 92.5%, 89.5%);
}

.hero {
  color: rgb(0, 51, 102);
  background: rgb(242, 236, 228);
}

@debug rgb(0 51 102 / 50%); // rgba(0, 51, 102, 0.5)

.overlay {
  background: rgb(0 51 102 / 50%);
}

.overlay {
  background: rgba(0, 51, 102, 0.5);
}

@debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5)

$grey: #6b717f;

.card {
  --wash: #{rgb(#f2ece4, 50%)};
  --ink: #{rgb($grey, 0.5)};
}

.card {
  --wash: rgba(242, 236, 228, 0.5);
  --ink: rgba(107, 113, 127, 0.5);
}

@use "sass:color";

$grey: #6b717f;

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

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

.overlay {
  // Sass cannot resolve --opacity; it emits the call for the browser
  background: rgb(0 51 102 / var(--opacity));
}

.overlay {
  background: rgb(0 51 102/var(--opacity));
}

🚀 Real-World Use Cases

• Design-token colors — author RGB values that match CSS tooling.
• Translucent variants — rgb($primary, 0.12) for soft fills from one hex.
• Level 4-friendly SCSS — write modern slash syntax; ship compatible CSS.
• Runtime themes — keep var(--opacity) inside rgb() for live control.
• Bridge to modules — same idea as color.change(..., $alpha:).

⚠️ Common Pitfalls

• Slash form with variables — prefer commas for $blue / $alpha variables.
• LibSass name rules — older engines may reject alpha on rgb(); use rgba() there.
• Expecting runtime Sass — number alphas are baked at compile time.
• Confusing with channel readers — color.red() reads a channel; rgb() builds a color.
• Assuming deprecation — rgb() is current; helpers like opacify are the deprecated ones.

💡 Best Practices