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.
