The functions CSS rgb() et rgba()

rgb()

rgba()

Summary of characteristics of the `rgb()` function

Quick description

Determines a color from the values of Red, Green and Blue.

Status

Standard

Percentages

Calculated in relation to the maximum value of each of the parameters, i.e. 255.

W3C Module

CSS Color Module

References (W3C)

🡇

🡅

CSS Color Module Level 5

Document status: WD (Working Draft)

CSS Color Module Level 4

Document status: WD (Working Draft)

CSS Color Module Level 3

Document status: REC (Recommendation)

Syntactic schema of `rgb()`.

Syntactic schema of the rgb() function
Detailed syntax

Description of the terms used in the diagram:

r, g, and b are the values of red, green, and blue. Unitless numbers between 0 and 255, or percentages.
alpha is the value of the opacity (alpha channel). A unitless number between 0 and 1, or a percentage.
color is a reference color, described in one of the CSS syntaxes: see Colors.

Description of the `rgb()` and `rgba()` functions.

The rgb() function defines a color from the three basic components which are red, green and blue.

The rgba() function defines a color and its opacity from the three basic colors (red, green, and blue) and the alpha parameter. The latter defines the opacity of the color, i.e. the possibility of seeing through or not.

Opaque color
rgba(255 0 0 / 1)

Transparent color
rgba(255 0 0 / 0)

Semi-opaque color
rgba(255 0 0 / 0.5)

There are two syntaxes for these functions. The old syntax, retained for compatibility purposes, in which parameters are separated by a comma, and the new one, with parameters separated by a space. On the other hand, the rgb() function now accepts opacity: the function rgba() is therefore useless.


	rgb(18, 110, 240)     /* Ols syntax */
	rgb(18 110 240 / 0.5) /* New syntax */

rgb() and rgba() can be used with any properties that expect a color. Examples:


	border-color: rgb(27 40 35);
	color: rgba(110 255 47 / 0.5);

As a reminder, RGB synthesis, or additive color synthesis, is used by all electronic or computer devices: television, screen, cameras, etc. This synthesis is based on the mixture of three basic colors, which are red, green and blue. By adjusting the proportions of each of these basic colors, it is possible to reproduce all the colors from a palette of About 16 million colors.

rgb() and rgba() define colors in the sRGB space, which is universally recognized by all browsers and all screens. However, it is the smallest color space compared to other spaces (adobeRGB, ProPhotoRGB), This means that some highly saturated colors will not be able to be represented. But this is changing: refer to the color() function to learn more about other color spaces.

The definition of the colors is very rich in CSS. See Colors for all the other possibilities allowing you to define a color: named colors, hexadecimal code of the color, notation HSL, etc.
You can also see the hsl(), hwb() , color() and @color-profile function pages.

On the other hand, here you will find a color synthesizer, which performs the conversions with the other color definition systems (HSL for example).

The `rgb()` and `rgba()` functions can be used with:

accent-color : Defines the colour of active or checked items.
background-color : Sets the background color.
border-color : Sets the color of the borders.
caret-color : Chooses the color of the text marker (flashing cursor).
color : Defines the color of the foreground (mainly text).
column-rule-color : Sets the color of column separator line.
lighting-color : Sets the color of the lighting in the context of an SVG filter.
outline-color : Sets the color of the outline.
scrollbar-color : Sets two colors that will be used for scrollbars.
text-decoration-color : Defines the color of the decorative line (underlined, stripe...).
text-emphasis-color : Sets the color of the emphasis characters.

Syntaxes of the `rgb()` function.

color: rgb(250, 127, 179); color: rgb(98%, 50%, 70%); r g b

Old syntax, kept for compatibility reasons. r, g, and b are three numerical values that respectively indicate the value of red, of green and blue. It can be three unitless numbers between 0 and 255, or three percentages, 100% corresponding to the maximum value 255.

The two syntaxes given in our example are therefore equivalent:
98% de 255 = 250
50% de 255 = 127
70% de 255 = 179

Decimal values are allowed, both with the first syntax and with the percentage syntax. Negative values are reduced to 0, values above 255 are reduced to 255.
color: rgb(250 127 179); color: rgb(98% 50% 70%); r g b

An alternative syntax was introduced by the W3C: values are separated by spaces instead of commas. This notation is now just as well recognized by browsers.

It is possible to write none when a value is 0.
color: rgba(250, 127, 179, 0.5); color: rgba(250, 127, 179, 50%); color: rgba(98%, 50%, 70%, 50%); color: rgba(250 127 179 / 0.5); r g b α

All of these syntaxes of the rgba() function are equivalent.

The additional parameter a is a unitless floating numeric value between 0 and 1, or a percentage between 0 and 100%. This parameter specifies the opacity of the color (alpha channel).
0 for no opacity (full transparency) and 1 for full opacity; Values between 0 and 1 indicate a more or less important opacity.

It is possible to separate the values with a simple space instead of a comma, but be careful, in this case, the opacity alpha is separated by a slash.

Note: The rgb() function now recognizes the alpha parameter with a syntax exactly the same as the one of rgba(). The latter can therefore be systematically replaced by rgb().
color: rgb(from lightBlue r 255 b); color: rgb(from lightBlue r 255 b / alpha); c r g b a

This syntax allows you to calculate a color from an already existing color. This is introduced by the word from. In our example, the starting color is lightBlue with the code rgb(173 216 230). We leave the values of red and blue unchanged but the value of green is forced to 255, so we get the color rgb(173,255,230).

The variables r, g, b, and alpha represent the value in the base color. It is possible to perform calculations on these values:

rgb(from beige r calc(g + 100) b / calc(alpha / 2));

Simulator.

As mentioned above, the rgba() function now duplicates rgb(). For this reason, this simulator only allows you to explore the rgb() function.

background-color :

transparent

rgb( 152 251 152 ) /* Integer */

rgb( 40% 50% 60% ) /* Percentages */

rgb( 15.2 95.5 150 / 0.5 ) /* Fractional numbers */

rgb( 152 251 152 / 0.5 ) /* Translucent color */

rgb( from pink r g 200 ) /* Reference color */

Browsers compatibility with `rgb()` function..

Browsers are all capable of processing colors defined by the values of Red, Green, and Blue with the rgb() and rgba() functions.

Column 1

Support for rgb() and rgba() functions to set a color in the RGB color space.

Column 2

Support for the alpha parameter (transparency) in the fourth position of the rgb() function.

Column 3

Support by browsers for floating point values for the parameters of the rgb() function.

Column 4

Support by browsers for syntax with spaces to separate parameters, and a / to introduce transparency.

rgb()
function

Alpha
parameter

Float
values

Space
separator

Estimated overall support.

97%

94%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `rgb()` function.