HTML - RGB and RGBA Colors

Quiz

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

We can make any colors using combinations of RED, GREEN, and BLUE. If you set the 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.

HTML RGB Colors

In HTML, RGB stands for Red, Green, and Blue, and it is a way of specifying colors by their intensity values. These colors can be used in HTML elements, such as backgrounds, borders, and fonts. To use RGB colors in HTML, we need to use the rgb() function inside the style attribute of an element.

The rgb() Function

The rgb() function takes three parameters, namely the red value, the green value, and the blue value. Each value is specified using an integer that 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.

Syntax

rgb(red, green, blue)

Example

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>

On the executing the above HTML code, it will produce a result with texts on different backgrounds.

HTML RGBA Colors

In HTML, RGBA stands for Red, Green, Blue, and Alpha, which is an extension of RGB with an additional channel for opacity. The alpha channel specifies how transparent or opaque a color is with a number between 0.0 and 1.0.

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.

To specify the RGBA color values in HTML, the rgba() function is used inside the style attribute or CSS file.

The rgba() Function

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.

Syntax

rgba(red, green, blue, alpha)

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.

Example

In this example, we have set the background color and text color using RGBA color code:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Colors by RGBA code</title>
</head>
<body style = "width:300px; height:100px;">
   <h2 style = "background-color: rgba(128 ,128 ,128 ,1.0);">Setting the Background using rgba()</h2>
   <table style = "background-color: rgba(255, 0 ,0 ,0.8);">
      <tr>
         <td>
            <p style = "color: gba(255, 255, 255, 1.0);">The text color of the paragraph is styled using rgba()</p>
         </td>
      </tr>
   </table>
</body>
</html>

On execution, the above HTML code will generate one heading and a paragraph with different background colors.

Comparison of RGB and RGBA Colors

The following table shows the comparison of the RGB and RGBA colors using RGB values and their opacity-reduced form using the 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)

RGB vs RGBA Colors

RGB color defines a color using only three color components (red, green, and blue) with values ranging from 0 to 255. RGB color does not support transparency. Whereas the RGBA color defines a color similar to RGB but also adds an alpha value for transparency, where 0 is for the fully transparent color and 1 is for the fully opaque. In short, RGB is used for solid colors, while RGBA is used when transparency is required.

Print Page