References

Beginner-friendly references for web development, with live, editable examples.

The CSS rgb() function

Function CSS All modern browsers Updated
Quick answer

The CSS rgb() function builds a color from red, green and blue channels (0–255), e.g. rgb(28 124 233). Add a slash and an alpha value for transparency: rgb(28 124 233 / 0.5) is 50% opaque. Modern CSS separates the channels with spaces; the older comma form rgb(28, 124, 233) and the separate rgba() function still work.

Overview

rgb() mixes a color from three channels — red, green and blue — each from 0 to 255. rgb(28 124 233) is a friendly blue; rgb(0 0 0) is black and rgb(255 255 255) is white.

Modern syntax separates the channels with spaces and tacks transparency on after a slash: rgb(28 124 233 / 0.5) is the same blue at half opacity. This single form replaces the old rgba() function — you no longer need a separate name just to add an alpha. The legacy comma syntax, rgb(28, 124, 233), still works everywhere if you prefer it.

Its real value over a hex code is that the channels are readable numbers you can reason about, which matters most when you reach for the alpha. A translucent overlay like rgb(0 0 0 / 0.4) is far clearer than its hex-with-alpha equivalent. For building palettes by adjusting lightness, though, hsl() is often the more intuitive choice.

Syntax

selector {
  color: rgb(28 124 233);
  /* with alpha */
  background: rgb(28 124 233 / 0.5);
}

Example

Live example 
<style>
  .row { display: flex; gap: 10px; font: 600 12px system-ui, sans-serif; text-align: center; }
  .row div { flex: 1; padding: 22px 8px; border-radius: 8px; color: #fff; }
  .a { background: rgb(28 124 233); }
  .b { background: rgb(220 38 38); }
  .c { background: rgb(22 163 74 / 0.55); color: #064e3b; }
</style>
<div class="row">
  <div class="a">rgb(28 124 233)</div>
  <div class="b">rgb(220 38 38)</div>
  <div class="c">22 163 74 / 0.55</div>
</div>

Best practices

  • Prefer the modern space syntax with a slash for alpha — rgb(0 0 0 / 0.5) — over the separate legacy rgba() function.
  • Use an alpha value for translucent overlays and backgrounds instead of the opacity property, which also fades the text.
  • Pair it with custom properties to store and theme colors.
  • For palettes built by lightening or darkening one hue, hsl() is usually easier to work with.

Accessibility

How you write a color makes no difference to contrast — what matters is the contrast ratio between the text color and its background. Whether you use rgb(), a hex code or hsl(), check that body text clears the usual 4.5:1 ratio. The alpha channel is where it is easiest to slip: a semi-transparent color sits on whatever is behind it, so the effective contrast changes with the backdrop.

Frequently asked questions

How do I use rgb() in CSS?
Give it red, green and blue values from 0 to 255, e.g. color: rgb(28 124 233). Add / 0.5 at the end for 50% transparency.
What is the difference between rgb() and rgba()?
Modern rgb() accepts an alpha after a slash, so it does everything rgba() did. The separate rgba() function still works but is no longer necessary.
How do I add transparency to an rgb color?
Add a slash and an alpha value, e.g. rgb(0 0 0 / 0.4) for 40% opaque black. Alpha runs from 0 (clear) to 1 (solid).
Should I use rgb() or hsl()?
Either works. rgb() maps to red/green/blue channels; hsl() is often easier when you want to build lighter and darker shades of one hue.
repeat() translate()