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 / .5)
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>
between0
and255
, a<percentage>
between0%
and100%
, or the keywordnone
, which represent the red, green, and blue channels, respectively. A
Optional-
An
<alpha-value>
or the keywordnone
, where the number1
corresponds to100%
(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()> =
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( <percentage>#{3} , <alpha-value>? ) |
rgb( <number>#{3} , <alpha-value>? ) |
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | 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 / 0.5);
}
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 / 0.5);
}
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