Back to: HTML Tutorials

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:

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

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.

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

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.

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.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.

Registration Open For New Online Training

Enhance Your Professional Journey with Our Upcoming Live Session. For complete information on Registration, Course Details, Syllabus, and to get the Zoom Credentials to attend the free live Demo Sessions, please click on the below links.