CSS rgb() Function

The CSS rgb() function can be used to provide a color value when using CSS. It allows you to specify an RGB color value by specifying the red, green, and blue channels directly.

RGB (which stands for Red, Green, Blue) is a color model in which red, green and blue light can be added together to reproduce a color.

The rgb() function accepts the RGB value as a parameter. The RGB value is provided as a comma-separated list of three values — providing the red, green, and blue hues respectively.

Each of the three values can be provided as an integer or as a percentage. The integer value 255 corresponds with a percentage value of 100%. Therefore, both of the following result in the same color (red):

rgb(255,0,0)
rgb(100%,0%,0%)

Here's an example of using the rgb() function in a style sheet:

body {
    color: rgb(255,0,0);
    background-color: rgb(0%,0%,100%);
    }

In this example, the first color is red (because it uses 255 for the red channel, and 0 for the others), and the second color is blue (because it uses 100% for the blue channel, and 0% for the others).

This is the equivalent of writing:

body {
    color: red;
    background-color: blue;
    }

Web Page Example

Here's a working example of using the rgb() function to define colors for a web page.

You can see that the RGB values show various levels of red, green, and blue. This effectively blends all three, resulting in the final color.

Hexadecimal Notation for RGB

You can also use the hexadecimal equivalent to the decimal RGB values.

But when you use hexadecimal, you don't need to use the rgb() function. You use the hex color notation instead. This is where you simply write out a six-digit hexadecimal value preceded by a hash symbol. For example, #FF0033.

Matching Colors between Models

Here's a chart showing how various decimal RGB values correspond to the hexadecimal and named color equivalents. Click on a value to open a test page using that color.