RGB in HTML

RGB and RGBA in HTML with Examples

In this article, I am going to discuss RGB and RGBA in HTML with Examples. Please read our previous article where we discussed Colors in HTML with Examples. At the end of this article, you will learn everything about HTML RGB and RGBA with Examples.

RGB in HTML

RGB stands for ‘RED, GREEN, and BLUE,’ and it is used to define the color of an HTML element by simply specifying R, G, and B values in the range of 0 to 255. The RGB() property is used to specify the color values in this format.

Syntax to use RGB in HTML:

Syntax to use RGB in HTML

This property accepts three values, which can be percentages or integers between 0 and 255.

RGB in HTML with Examples

Because red is set to its maximum value (255), and the other two (green and blue) are also set to 0, rgb(255, 0, 0) is rendered as red.

Similarly, green is set to its maximum value (255), and the other two (red and blue) are also set to 0, rgb(0, 255, 0) is rendered as green.

Similarly, blue is set to its maximum value (255), and the other two (green and red) are also set to 0, rgb(0, 0, 255) is rendered as blue.

RGB Example in HTML
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;}

div{
padding:25px;
color:white;}
</style>

<body>

<div class="div1" style="background-color:rgb(255,0,0);">rgb(255,0,0)</div>
<div class="div2" style="background-color:rgb(0,255,0);">rgb(0,255,0)</div>
<div class="div3" style="background-color:rgb(0,0,255);">rgb(0,0,255)</div>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

RGB Example in HTML

RGBA in HTML

The only difference between RGBA and RGB is that RGBA includes A (Alpha), which specifies the element’s transparency. The alpha value ranges from 0.0 to 1.0, with 0.0 being entirely transparent and 1.0 reflecting opaque.

Syntax to use RGBA in HTML

Syntax to use RGBA in HTML

RGBA Example in HTML
<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;}

div{
padding:25px;
color:black;}
</style>
<body>

<div style="background-color:rgba(0,255,0,0);">rgba(0,255,0,0)</div>
<div style="background-color:rgba(0,255,0,0.25);">rgba(0,255,0,0.25)</div>
<div style="background-color:rgba(0,255,0,0.5);">rgba(0,255,0,0.5)</div>
<div style="background-color:rgba(0,255,0,0.75);">rgba(0,255,0,0.75)</div>
<div style="background-color:rgba(0,255,0,1);">rgba(0,255,0,1)</div>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

RGBA Example in HTML

In the next article, I am going to discuss HEX in HTML with Examples. Here, in this article, I try to explain RGB and RGBA in HTML with Examples and I hope you enjoy this article.

Leave a Reply

Your email address will not be published.