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">w3wiki</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


Contact Us