Create a White RGBA in HTML

This article will discuss some methods to create a white RGBA in HTML.

Use background:rgba() to Create a White RGBA

RGBA denotes Red, Green, Blue, and Alpha. Alpha specifies the opacity for a color. We can use the rgba() function in CSS to specify the color values for the mentioned colors. The intensity of RGB can vary from 0-255, but the value of alpha only ranges from 0.0(not visible/fully transparent) to 1.0 (visible/not transparent). We can apply the white RGBA with the rgba() function as a layer to some other colors. Thus, we can see the effects of white RGBA. When we set the value 255 to all the color options, it will create a white color. We can set the opacity to make the layer visible.

For example, in HTML, create five div elements and name the classes as layer, blue, yellow, red, and black. Then in CSS, select all the classes except layer and set the height to 40px and width to 100%. Then select the yellow class and set the background to yellow. Similarly, set the background to all of the classes like this. Next, select the layer class and apply some styles to it. Set width to 50% and height to 400px. Apply the absolute positioning and set the background to rgba(255,255,255,0.5).

In the example below, we created four containers for the four colors. We applied a 100% width to all these colors. Then, we created an overlay with the layer class. We divided the whole width in half and applied a white RGBA. We used the value 255 for each RGB value and the opacity of 0.5 to it. Thus, it created a white background overlay to the original colors. We can see the opacity of the original color increasing in the first half section of the colors. We can change the opacity value according to our wish to see the changes. The higher opacity value in the white color makes the background colors less transparent and vice versa. Thus, we can create a white RGBA overlay above the other colors.

Example Code:

<div class="layer"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="red"></div>
<div class="black"></div> 

.blue,.yellow,.red,.black {
 height:40px;
 width:100%;
}
.yellow{
 background:yellow;
}
.blue{
 background:blue;
}
.red{
 background:red;
}
.black{
 background:black;
}
.layer {
 width:50%;
 height:400px;
 position:absolute;
 background:rgba(255,255,255,0.5);
}