HTML RGB Colors

❮ Previous Next ❯

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

Blue

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>

Result on Editor

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>

Result on Editor

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>

Result on Editor

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>

Result on Editor

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>

Result on Editor

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>

Result on Editor

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

Blue

Alpha

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>