CSS rgb() Function
Example
Define different RGB(A) colors:
#p1 {background-color:rgb(255 0 0);} /* red */
#p2 {background-color:rgb(0 255 0);} /* green */
#p3 {background-color:rgb(0 0 255);} /* blue */
#p4 {background-color:rgb(192 192 192);} /* gray */
#p5 {background-color:rgb(255
255 0);} /* yellow */
#p6 {background-color:rgb(255 0 255);} /* cerise */
#p7 {background-color:rgb(255 0 255 / 0.2);} /* cerise with opacity */
#p8
{background-color:rgb(0 0 255 / 50%);} /* blue with opacity */
Try it Yourself »
Definition and Usage
The CSS rgb() function specifies a color
using the Red-green-blue (RGB) color model. An
optional alpha component can also be added (represents the transparency of the
color).
An RGB color value is specified with: rgb(red green blue). Each parameter defines the intensity of that color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).
For example, the rgb(0 0 255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.
Note: The rgba() function
is an alias for the rgb() function. It is
recommended to use the rgb() function.
| Version: | CSS2 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| rgb() | 1 | 4 | 1 | 1 | 3.5 |
| rgb() with alpha parameter | 65 | 79 | 52 | 12.1 | 52 |
| Space-separated parameters | 65 | 79 | 52 | 12.1 | 52 |
CSS Syntax
Absolute value syntax
rgb(R G B / A)
| Value | Description |
|---|---|
| R | Required. Defines the intensity of red as an integer between 0 and 255, or as a percentage value between 0% and 100%. None can also be used (same as 0%) |
| G | Required. Defines the intensity of green as an integer between 0 and 255, or as a percentage value between 0% and 100%. None can also be used (same as 0%) |
| B | Required. Defines the intensity of blue as an integer between 0 and 255, or as a percentage value between 0% and 100%. None can also be used (same as 0%) |
| / A | Optional. Represents the alpha channel value of the color, from 0% (or 0) - fully transparent to 100% (or 1) - fully opaque. None can also be used (indicates no alpha channel). The default value is 100% |
Relative value syntax
rgb(from color R G B / A)
| Value | Description |
|---|---|
| from color | Start with the keyword from, followed by a color value that represents the origin color. This is the original color that the relative color is based on |
| R | Required. Defines the intensity of red as an integer between 0 and 255, or as a percentage value between 0% and 100%. None can also be used (same as 0%) |
| G | Required. Defines the intensity of green as an integer between 0 and 255, or as a percentage value between 0% and 100%. None can also be used (same as 0%) |
| B | Required. Defines the intensity of blue as an integer between 0 and 255, or as a percentage value between 0% and 100%. None can also be used (same as 0%) |
| / A | Optional. Represents the alpha channel value of the color, from 0% (or 0) - fully transparent to 100% (or 1) - fully opaque. None can also be used (indicates no alpha channel). The default value is 100% |
