Many beginners use color name or RGB hexadecimal value of color to define CSS color properties and they are unaware of functional notation of RGBA color model. So in this article we tried to let them understand what is RGBA in CSS?
To going further let us have a look over what is RGB color model? The RGB color model in CSS is used in numerical color specifications. RGB (red, green, and blue) refers to a system for representing the colors to be used on a computer display. Red, green, and blue can be combined in various proportions to obtain any color in the visible spectrum. The formats are:
rgb(R,G,B) -integer-
The format of an RGB value in the functional notation is ‘rgb(’ followed by a comma-separated list of three numerical values (three integer values(0-255, 0-255, 0-255)) followed by ‘)’.
rgb(R,G,B) -percentage-
The format of an RGB value in the functional notation is ‘rgb(’ followed by a comma-separated list of three numerical values (three percentage values(0%-100%, 0%-100%, 0%-100%)) followed by ‘)’.
| rgb(integer) | rgb(percentage) | Color |
|---|---|---|
| rgb(0,0,0) | rgb(0%,0%,0%) |  |
| rgb(255,255,255) | rgb(100%,100%,100%) |  |
| rgb(255,0,0) | rgb(100%,0%,0%) |  |
| rgb(0,255,0) | rgb(0%,100%,0%) |  |
| rgb(0,0,255) | rgb(0%,0%,100%) |  |
Now we can move to What is RGBA in CSS.
CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in this property-name stands, for, you guessed it: alpha. This new feature allows us to specify an opacity value for a color. Value of alpha ranges from 0 (fully transparent) to 1 (fully opaque).
See the example to check different alpha value ranging from 0.2, 0.4, 0.6, 0.8 and 1 with rgb value (0, 0, 255).
0 1 2 3 4 5 | <div class="container" style="background: rgba(0, 0, 255, 0.2);"></div> <div class="container" style="background: rgba(0, 0, 255, 0.4);"></div> <div class="container" style="background: rgba(0, 0, 255, 0.6);"></div> <div class="container" style="background: rgba(0, 0, 255, 0.8);"></div> <div class="container" style="background: rgba(0, 0, 255, 1) ;"></div> |
Now we have fully understand what is RGBA in CSS. You can use and play with these values to obtain desire color setting in your webpage.