HTML RGB Colors

RGB stands for three color components, namely red, green and blue. In HTML, we can specify the color for an element in its style attribute using the RGB value.

Formula
rgb(red, green, blue)

Below is an RGB color generator. Set different values for red, green and blue to generate a new color.

 

Red

255

Green

0

Blue

0
Example
<!DOCTYPE html>
<html>
<head>
<title>RGB Color Example</title> </head>
<body>

<h1 style="color:LightSeaGreen;">The heading color is set by its name LightSeaGreen.</h1>
<p style="background-color:rgb(32, 178, 170);">Background Color of the paragrah is set with rgb value, rgb(32, 178, 170). The RGB value of LightSeaGreen is rgb(32,178,170). So now you know that the color can be set with an RGB value too.</p>

</body>
</html>

The first parameter sets the intensity of the red color.

The second parameter sets the intensity of the green color, and the third parameter sets the intensity of the blue color light source.

The intensity for each parameter can be set from 0 to 255. i.e. a total of 256 unique levels can be set for each color.

The red color on the web screen is displayed by rgb(255, 0, 0).

It means the intensity for the red color light source is set to high and the intensity for green and blue color is set to 0.

Example
<!DOCTYPE html>
<html>
<head>
<title>RGB Red Color Example</title> </head>
<body>

<h1 style="color:rgb(255, 0, 0);">The heading color is set to red by RGB value.</h1>
<p style="background-color:rgb(255, 0, 0);">Background Color of this paragrah is set with rgb value, rgb(255, 0, 0). Red value is set to 255. Green is set to 0 and Blue is set 0.</p>

</body>
</html>

Similarly, when you need to display the blue color on a web page, specify the color value as rgb(0, 255, 0).

Example
<!DOCTYPE html>
<html>
<head>
<title>RGB Green Color Example</title> </head>
<body>

<h1 style="color:rgb(0, 255, 0);">The heading color is set to green by RGB value.</h1>
<p style="background-color:rgb(0, 255, 0);">Background Color of this paragrah is set with rgb value, rgb(0, 255, 0). Red value is set to 0. Green is set to 255 and Blue is set 0.</p>

</body>
</html>

A blue color can be specified using the RGB value rgb(0, 0, 255).

Example
<!DOCTYPE html>
<html>
<head>
<title>RGB Blue Color Example</title> </head>
<body>

<h1 style="color:rgb(0, 0, 255);">The heading color is set to blue by RGB value.</h1>
<p style="background-color:rgb(0, 0, 255);">Background Color of this paragrah is set with rgb value, rgb(0, 0, 255). Red value is set to 0. Green is set to 0 and Blue is set 255.</p>

</body>
</html>

By trying different combinations of intensities for each color in the RGB value, we can display a total of 16777216 (=256 * 256 * 256) colors on the web page.

Black Color RGB

Setting every parameter to 0 in the RGB value produces black color.

It means you need to set color intensities for red, green and blue to 0.

Black Color
rgb(0, 0, 0)
Example
<!DOCTYPE html>
<html>
<head>
<title>RGB Black Color Example</title> </head>
<body>

<h1 style="color:rgb(0, 0, 0);">The heading color is set to black by RGB value.</h1>
<p style="background-color:rgb(0, 0, 0);">Background Color of this paragrah is set with rgb value, rgb(0, 0, 0). Red value is set to 0. Green is set to 0 and Blue is set 0.</p>

</body>
</html>

White Color RGB

Setting every parameter to the highest value (255), the browser produces color for the white.

White Color
rgb(255, 255, 255)
Example
<!DOCTYPE html>
<html>
<head>
<title>RGB White Color Example</title> </head>
<body style="background-color:rgb(0, 0, 0);">

<h1 style="color:rgb(255, 255, 255);">The heading color is set to white by RGB value.</h1>
<p style="background-color:rgb(255, 255, 255);">Background Color of this paragrah is set with rgb value, rgb(255, 255, 255). Red value is set to 255. Green is set to 255 and Blue is set 255.</p>

</body>
</html>

Gray Color RGB

The equal value of all three parameters produces a gray color.

By trying different combinations of equal values, shades of gray color can be produced.

rgb(220, 220, 220)
rgb(180, 180, 180)
rgb(140, 140, 140)
rgb(120, 120, 120)
rgb(80, 80, 80)
rgb(40, 40, 40)

RGBA Color

RGBA is an extension of RGB color values.

An extra parameter called Alpha Channel is provided in the value which sets the opacity for a color.

In HTML, the name of the color can be provided using the RGBA value as follows:

RGBA Color
rgba(red, green, blue, alpha)

Here the fourth parameter is for color transparency. Its value can be set between 0.0 and 1.0.

The value 0 indicates that the color is fully transparent.

The value 1 indicates that the color is not transparent at all.

Below is an RGBA color generator. Set different values for red, green, blue and alpha to generate a new color.

 

Red

255

Green

0

Blue

0

Alpha

0
Example
<!DOCTYPE html>
<html>
<head>
<title>RGBA Color Example</title> </head>
<body>

<h1 style="color:rgba(255, 0, 0,1);">The heading color is set to red by RGBA value.</h1>
<p style="background-color:rgba(0, 0, 255,0.2);">Background Color of this paragrah is set with rgb value, rgba(0, 0, 255,0.2). Red value is set to 0. Green is set to 0 and Blue is set 255. Transparency is set 0.2.</p>

</body>
</html>

  • Disclaimer: ResultUniversity.com is an independent private website and it is in no way affiliated to any Indian Government official website. The sole purpose of this website is to provide notifications regarding the latest results published. Though utmost care is being taken, we can not guarantee 100% correctness of information. Using this website confirms that you agree to all the terms and conditions.