Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference between RGB vs RGBA color format
In HTML, the RGB i.e. (red, green, and blue) specifies the shades or intensity of the color with a value between 0 and 255. The RGB color model has a total of 256 x 256 x 256 = 16777216 possible colors.
By adjusting the RGB values we can come up with different shades of colors, following are a few examples −
Let’s say we want a “black” color, set all the parameters as, rgb(0, 0, 0).
If we want to display a “white” color, set all the parameters as, rgb(255, 255, 255).
If we set the parameters as rgb(255, 0, 0), it will give us a “red” color because the first parameter (red) is set to its highest value.
If we set the parameters as rgb(0, 255, 0), it will give us a “green” color because the second parameter (green) is set to its highest value.
If we set the parameters as rgb(0, 0, 255), it will give us a “blue” color because the third parameter (blue) is set to its highest value.
Example
In the following example, we are trying to display colors using the HTML RGB color format −
<!DOCTYPE html> <html> <head> <title>HTML RGB color format</title> </head> <body> <h1 style="background-color:rgb(255, 0, 0);">Red</h1> <h1 style="background-color:rgb(60, 179, 113);">Green</h1> <h1 style="background-color:rgb(0, 0, 255);">Blue</h1> <h1 style="background-color:rgb(255, 255, 0);">Yellow</h1> <h1 style="background-color:rgb(255, 191, 0);">Orange</h1> <h1 style="background-color:rgb(255, 0, 255);">Pink</h1> </body> </html>
As we can see in the output, we have displayed six colors (red, green, blue, yellow, orange, pink) using the rgb color format.
RGBA Color Format
In HTML, the RGBA i.e. (red, green, blue, alpha) is an extension of RGB colors with an Alpha channel. Using this we can specify the opacity of a color.
The alpha parameter is a number that can be in between 0.0 (fully transparent) to 1.0 (not transparent).
Example
In the following example, we are using RGBA color format to get all the shades of “green” color by adjusting its opacity. −
<!DOCTYPE html>
<html>
<head>
<title>HTML RGBA color format </title>
<style>
span {
text-align: center;
}
</style>
</head>
<body>
<span>
<h1>OPACITY OF GREEN</h1>
</span>
<h1 style="background-color: rgba(0, 255, 0, 1);">rgba(0, 255, 0, 1)</h1>
<h1 style="background-color: rgba(0, 255, 0, 0.8);">rgba(0, 255, 0, 0.8)</h1>
<h1 style="background-color: rgba(0, 255, 0, 0.6);">rgba(0, 255, 0, 0.6)</h1>
<h1 style="background-color: rgba(0, 255, 0, 0.4);">rgba(0, 255, 0, 0.4)</h1>
<h1 style="background-color: rgba(0, 255, 0, 0.2);">rgba(0, 255, 0, 0.2)</h1>
<h1 style="background-color: rgba(0, 255, 0, 0);">rgba(0, 255, 0, 0)</h1>
</body>
</html>
As we can see in the output, we displayed the shades of green color.
RGB Color Format VS RGBA Color Format
Following are the differences between RGB color format and RGBA color format −
RGB Color Format |
RGBA Color Format |
|---|---|
The components of RGB are Red, Green, and Blue. |
The components of RGBA are Red, Green, Blue, and Alpha (opacity). |
This format does not support opacity. |
This format supports opacity with the help of the alpha channel. |
The intensity of the color with a value between 0 and 255. |
For RBG the values will be in between 0-255 and for Alpha it will be 0.0-1.0 |
The CSS function for this format is “rgb()”. |
The CSS function for this format is “rgba()”. |
161 Views
