CSS rgb() Function

The rgb() function is an inbuilt function in CSS that is used to define the colors using the Red Green Blue (RGB) model.

Syntax:

rgb( red, green, blue )

Parameters: This function accepts three parameters as mentioned above and described below:

red: This parameter is used to define the intensity of the red color. It is an integer value that lies between 0 to 255, or as a percentage value between 0% to 100%.
green: This parameter is used to define the intensity of the green color. It is an integer value that lies between 0 to 255, or as a percentage value between 0% to 100%.
blue: This parameter is used to define the intensity of the blue color. It is an integer value that lies between 0 to 255, or as a percentage value between 0% to 100%.

Example: The below programs illustrates the rgb() function in CSS:

html

<!DOCTYPE html>
<html>

<head>
    <title>rgb function</title>
    <style>
        .gfg1 {
            background-color: rgb(1, 153, 0);
            text-align: center;
        }
        
        .gfg2 {
            background-color: rgb(0, 255, 0);
            text-align: center
        }
        
        .gfg3 {
            background-color: rgb(133, 150, 150);
            text-align: center
        }
        
        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
            text-align: center;
        }
        
        h1 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="gfg">GeeksforGeeks</div>
    <h1>The rgb() Function</h1>
    <p class="gfg1">Green</p>
    <p class="gfg2">Light green</p>
    <p class="gfg3">Light black</p>
</body>

</html>

Output:

Supported Browsers: The browser supported by rgb() function are listed below:

Chrome
Edge
Firefox
Safari
Opera

Explore