HTML - RGB

RGB Colors in HTML

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 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.

Following is a list to show a few colors using RGB values −

Color Color HEX
  rgb(0,0,0)
  rgb(255,0,0)
  rgb(0,255,0)
  rgb(0,0,255)
  rgb(255,255,0)
  rgb(0,255,255)
  rgb(255,0,255)
  rgb(192,192,192)
  rgb(255,255,255)

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.

RGBA Colors in HTML

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.

Example

In this example, we have set 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.

Advertisements