Opacity vs. rgba

Published 26 Nov by SuperNOVA

Opacity vs. rgbaWe can introduce transparency in HTML documents by two common methods: opacity and rgba color mode. But, what is the difference between the two? Let’s find out.

Opacity

While using opacity might appear convenient at the first look, you might be surprised to see that using rgba() convention might be much more useful. Setting an opacity of an HTML element also sets the opacity for its children elements while there are many cases when we don’t want that. Not to mention that some browsers don’t understand opacity, you have to use filters for them (Yes IE, I am talking about you!) Consider this piece of code: The above shall render something like this:
DEMO

Some cool text here!!

As you can see that the text above is barely visible. This is due to that fact that the opacity is set for the div as well its children (the paragraph element).

RGBA

rgba stands for Red, Green, Blue, Alpha; each value can range from 0-255. For instance, red = rgb(255,0,0), blue = rgb(0,0,255), black (with opacity 0.5) = rgba(0,0,0,0.5) and so on. Granted, that to use rgba you sometimes have to complicate things like to set a background of red, you will need to use rgb(255,0,0) or rgba(255,0,0,1), but that is what I consider good about CSS – you have so many ways of achieving a task that where one method might have some drawbacks you can easily overcome them using some other method. Like in this case when you don’t need to use rgba simply use background:red or an equivalent hash tag. But that’s another tangent all together, when setting the alpha value of an element using the rgba convention you don’t effect the opacity of the child elements.Consider the following piece of code: You can see the result of the above in the demo:
DEMO

Some cool text here!!

It is evident that although the div element has an opacity of 0.1 but the text inside the p tag is visible. Obviously this is just to get a grasp on the concept but such a technique can be used to render a very good effect when properly used!

Although, there might be projects where you might be inclined to use opacity and it might actually be better in that scenario but you also should have other ways in mind as it might help you somewhere else.

Other methods

I have only talked about opacity & rgba in this post while there are other methods of setting the colors as well, hsl/hsla is one such method, hsla-hue, saturation, lightness, alpha which follows a similar approach as rgba.

Although I prefer rgba (mostly because I don’t understand terms like hue etc :P), but that shouldn’t stop you from using it. Experiment with different modes, learn about colors and don’t forget to share what you learn!