CSS rgb() function

Definition and Usage

CSS's rgb() function using the red-green-blue (RGB) color model. An optional opacity channel (representing the color's opacity) can also be added.

RGB color values are specified through rgb(red green blue) Specify. Each parameter defines the intensity of the color, which can be an integer between 0 and 255 or a percentage value between 0% and 100%.

For example, the rgb(0 0 255) value appears as blue because the blue parameter is set to the maximum value (255), while the other parameters are set to 0.

Note:rgba() The function is rgb() Alias of the function. It is recommended to use 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);} /* Grey */
#p5 {background-color:rgb(255 255 0);} /* Yellow */
#p6 {background-color:rgb(255 0 255);} /* Cherry red */
#p7 {background-color:rgb(255 0 255 / 0.2);} /* Cherry red with transparency */
#p8 {background-color:rgb(0 0 255 / 50%);} /* Blue with transparency */

Try it yourself

CSS syntax

Absolute value syntax

rgb(R G B / A)
Value Description
R

Required. Defines the intensity of the red, which can be an integer from 0 to 255 or a percentage from 0% to 100%.

Also, you can use none (equivalent to 0%).
G

Required. Defines the intensity of the green, which can be an integer from 0 to 255 or a percentage from 0% to 100%.

Also, you can use none (equivalent to 0%).
B

Required. Defines the intensity of the blue, which can be an integer from 0 to 255 or a percentage from 0% to 100%.

Also, you can use none (equivalent to 0%).
/ A

Optional. Represents the transparency channel value of the color, 0% (or 0) indicates completely transparent, and 100% (or 1) indicates completely opaque.

Also, you can use none (indicating no transparency channel). The default value is 100%.

Relative value syntax

rgb(from color R G B / A)
Value Description
from color

Starts with the keyword from, followed by the color value representing the original color.

This is the original color on which the relative color is based.
R

Required. Defines the intensity of the red, which can be an integer from 0 to 255 or a percentage from 0% to 100%.

Also, you can use none (equivalent to 0%).
G

Required. Defines the intensity of the green, which can be an integer from 0 to 255 or a percentage from 0% to 100%.

Also, you can use none (equivalent to 0%).
B

Required. Defines the intensity of the blue, which can be an integer from 0 to 255 or a percentage from 0% to 100%.

Also, you can use none (equivalent to 0%).
/ A

Optional. Represents the transparency channel value of the color, 0% (or 0) indicates completely transparent, and 100% (or 1) indicates completely opaque.

Also, you can use none (indicating no transparency channel). The default value is 100%.

Technical details

Version: CSS2

Browser support

The numbers in the table indicate the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
rgb()
1 4 1 1 3.5
RGB with transparency parameter
65 79 52 12.1 52
Space-separated parameters
65 79 52 12.1 52