rgb()

The rgb() functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color's transparency.

Note: The legacy rgba() syntax is an alias for rgb(), accepting the same parameters and behaving in the same way.

Try it

Syntax

css
rgb(255 255 255)
rgb(255 255 255 / 50%)

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

Values

Functional notation: rgb(R G B[ / A])

R, G, B

Each as a <number> between 0 and 255, a <percentage> between 0% and 100%, or the keyword none, which represent the red, green, and blue channels, respectively.

A Optional

An <alpha-value> or the keyword none, where the number 1 corresponds to 100% (full opacity).

Note: This functional notation serializes to sRGB values, and the values of the red, green, blue components may be rounded in serialization.

Note: See Missing color components for the effect of none.

Formal syntax

<rgb()> = 
<legacy-rgb-syntax> |
<modern-rgb-syntax>

<legacy-rgb-syntax> =
rgb( <percentage>#{3} , <alpha-value>? ) |
rgb( <number>#{3} , <alpha-value>? )

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

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

Examples

Legacy syntax: comma-separated values

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

HTML

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

CSS

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

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

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

Result

Legacy syntax: rgba()

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

HTML

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

CSS

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

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

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

Result

Specifications

Specification
CSS Color Module Level 4
# rgb-functions

Browser compatibility

BCD tables only load in the browser

See also

  • The <color> data type for a list of all color notations