Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

RGB Stream in CSS

  • Last Updated : 18 Oct, 2021

RGB represents colors in CSS. There are three streams in this nomenclature representing a color, namely the Red, Green, and Blue streams. The intensity of colors is represented using numbers 0 to 255. This allows CSS to have a spectrum of visible colors.

These three colors can be in form of numbers (0 to 255) or percentages.

  • RGB(255, 0, 0) or  RGB(100%, 0, 0) is RED, as red is set to its highest value.
  • RGB(0, 255, 0) or  RGB(0, 100%, 0)  is GREEN, as green is set to its highest value.
  • RGB(0, 0, 255) or  RGB(0, 0, 100%) is BLUE, as blue is set to its highest value.

 Example 1:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 2px solid;
            display: flex;
            float: left;
            margin: 10px;
            border-radius: 10px;
        }
  
        .box1 {
  
            /* rgb(100%, 0, 0) */
            background-color: rgb(255, 0, 0);
        }
  
        .box2 {
  
            /* rgb(0, 100%, 0) */
            background-color: rgb(0, 255, 0);
        }
  
        .box3 {
  
            /* rgb(0, 0, 100%) */
            background-color: rgb(0, 0, 255);
        }
    </style>
</head>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
  
</html>

Output:           



Example 2: We can use rgb() for different colors.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        div {
            width: 250px;
            height: 120px;
            display: flex;
            float: left;
            margin: 10px;
            border: 1px solid;
        }
  
        .box1 {
            background-color: rgb(131, 176, 7);
        }
  
        .box2 {
            background-color: rgb(230, 77, 163);
        }
  
        .box3 {
            background-color: rgb(106, 90, 205);
        }
  
        .box4 {
            background-color: rgb(90, 197, 205);
        }
  
        .box5 {
            background-color: rgb(0, 255, 255);
        }
  
        .box6 {
            background-color: rgb(255, 69, 0);
        }
  
        .box7 {
            background-color: rgb(60, 60, 60);
        }
  
        .box8 {
            background-color: rgb(255, 255, 255);
        }
    </style>
</head>
  
<body>
    <h2 style="color:green">
          GeeksforGeeks
      </h2>
    
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
</body>
  
</html>

Output:

          




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!