rgb()

/* Syntax with space-separated values */
rgb(255 255 255)
rgb(255 255 255 / .5)

/* Syntax with comma-separated values */
rgb(255, 255, 255)
rgb(255, 255, 255, .5)

/* Legacy rgba() syntax */
rgba(255 255 255)
rgba(255 255 255 / .5)

rgba(255, 255, 255)
rgba(255, 255, 255, .5)

The rgb() function accepts three space-separated values, representing respectively values for red, green, and blue. Optionally it may also be given a slash / followed by a fourth value, representing alpha.

The function also accepts a legacy syntax in which all values are separated with commas.

red, green, blue

These values represent color channels and may each be a <number> clamped between 0 and 255, or a <percentage>, or the keyword none. You can't mix percentages and numbers, so:

• if any of these values is a number, then they must all be numbers or none
• if any of these values is a percentage, then they must all percentages or none.

alpha

A <number> clamped between 0 and 1, or a <percentage>. This value represents opacity, where the number 1 corresponds to 100% (full opacity). It defaults to 100%.

<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<alpha-value> = 
  <number>      |
  <percentage>  

For legacy reasons, the rgb() function accepts a form in which all values are separated using commas.

HTML

<div class="space-separated"></div>
<div class="comma-separated"></div>

CSS

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: rgb(255 0 0 / 0.5);
}

div.comma-separated {
  background-color: rgb(255, 0, 0, 0.5);
}

Result

The legacy rgba() syntax is an alias for rgb().

HTML

<div class="rgb"></div>
<div class="rgba"></div>

CSS

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.rgb {
  background-color: rgb(255 0 0 / 0.5);
}

div.rgba {
  background-color: rgba(255 0 0 / 0.5);
}

Result