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
/* 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.
Values
red
,green
,blue
-
These values represent color channels and may each be a
<number>
clamped between 0 and 255, or a<percentage>
, or the keywordnone
. 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
.
- if any of these values is a number, then they must all be numbers or
alpha
-
A
<number>
clamped between0
and1
, or a<percentage>
. This value represents opacity, where the number1
corresponds to100%
(full opacity). It defaults to 100%.
Formal syntax
Examples
Legacy syntax: comma-separated values
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
Legacy syntax: rgba()
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
Specifications
Specification |
---|
CSS Color Module Level 4 # rgb-functions |
Browser compatibility
BCD tables only load in the browser