HTML - RGB and RGBA Colors

HTML RGB and RGBA colors are supported by all browsers. RGB color value represent intensity of RED, GREEN and BLUE in a color. RGBA is extension of RGB, that also specify a alpha channel for opacity of color.

We can make any colors using combination RED, GREEN and BLUE. If you set maximum intensity of all three colors, then the resulting color will be white. Similarly if we give zero intensity for all RGB values, we will get black color.

RGB Color Values

In HTML a color can be defined using the below function.

rgb(red, green, blue)

The rgb() function takes three parameters namely the red value, the green value and the blue value. Each value is specified using an integer which can range from 0 to 255, where 0 means no color and 255 means full color intensity. Mixing these values will create other different colors.

RGBA Color Values

In HTML a RGBA color can be defined by using rgba function.

rgb(red, green, blue, alpha)

The rgba() function takes four parameters. The parameter alpha accepts a decimal value between 0 and 1 to determine opacity of a RGB color. The value 0 indicates that the color is not visible and value 1 indicates color is fully visible.

For example, rgba(255, 0, 0, 1.0) is fully opaque red, rgba(255, 0, 0, 0.5) is semi-transparent red, and rgba(255, 0, 0, 0.0) is fully transparent red.

Comparison of RGB & RGBA Colors

Following is a list to show a few colors using RGB values and their opacity reduced form using RGBA function.

RGB Color	RGB function	RGBA Color	RGBA function
	rgb(0, 0, 0)		rgba(0, 0, 0, 0.7)
	rgb(255, 0, 0)		rgba(255, 0, 0, 0.7)
	rgb(0,255,0)		rgba(0, 255, 0, 0.7)
	rgb(0, 0, 255)		rgba(0, 0, 255, 0.7)
	rgb(255, 255, 0)		rgba(255, 255, 0, 0.7)
	rgb(0, 255, 255)		rgba(0, 255, 255, 0.7)
	rgb(255, 0, 255)		rgba(255, 0, 255, 0.7)
	rgb(192, 192, 192)		rgba(192, 192, 192, 0.7)
	rgb(255, 255, 255)		rgba(255, 255, 255, 0.7)

Examples of HTML RGB and RGBA Colors

Here are few examples that illustrate use of rgb and rgba functions in HTML.

HTML RGB Colors

Here is an example to set background of HTML tags by color code using rgb() values.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Colors by RGB Code</title>
</head>

<body style="background-color: rgb(255,255,0);">
   <p>
      Use different color code for body and 
      table and see the result. 
   </p>
   <table style="background-color: rgb(0,0,0);">
      <tr>
         <td>
            <p style="color: rgb(255,255,255);">
               This text will appear white on 
               black background.
            </p>
         </td>
      </tr>
   </table>

</body>
</html>

HTML RGBA Colors

In this example, we have set background color and text color using rgba color code.

<!DOCTYPE html>
<html>
<head>
   <style>
      div{
            border: 1px solid;
            height: 30px;
            font-weight: bold;
      }
   </style>
</head>

<body>
   <h2>RGBA Color variations</h2>
   <div style = 
         "background-color: rgba(255, 0 ,0 ,1);">
      opacity 1.0
   </div>
   <div style = 
         "background-color: rgba(255, 0 ,0 ,0.9);">
      opacity 0.9
   </div>
   <div style = 
         "background-color: rgba(255, 0 ,0 ,0.8);">
      opacity 0.8
   </div>
   <div style = 
         "background-color: rgba(255, 0 ,0 ,0.7);">
      opacity 0.7
   </div>
   <div style = 
         "background-color: rgba(255, 0 ,0 ,0.6);">
      opacity 0.6
   </div>
   <div style = 
         "background-color: rgba(255, 0 ,0 ,0.5);">
      opacity 0.5
   </div>
   <div style = 
         "background-color: rgba(255, 0 ,0 ,0.4);">
      opacity 0.4
   </div>
   <div style = 
         "background-color: rgba(255, 0 ,0 ,0.3);">
      opacity 0.3
   </div>
   <div style = 
         "background-color: rgba(255, 0 ,0 ,0.2);">
      opacity 0.2
   </div>
   <div style = 
         "background-color: rgba(255, 0 ,0 ,0.1);">
      opacity 0.1
   </div>
   <div style = 
         "background-color: rgba(255, 0 ,0 ,0.0);">
      opacity 0.0
   </div>
   
</body>
</html>

Print Page