Detailed explanations about the CSS 3 RGBA color notation. Examples of colors in which we can apply transparency thanks to the possibility of specifying the Alpha channel.

As we know, the are traditionally expressed in RGB values. In CSS we also have the RGB notation but it also supports various additional notations to define the color, through numbers in hexadecimal and even in decimal. All of this we assume will not be a mystery to readers, who will no doubt have experimented with CSS and are probably familiar with the different notations for specifying color in style sheets.

Now we want to talk about a new notation, which is not just a new way of expressing the same thing, but one that allows us to define colors by means of additional values ​​such as transparency. This is the RGBA notation, which is available to developers as of CSS 3.

What is the RGBA notation?

RGBA notation is a way of specifying colors in which four values ​​are defined. The first three are the well-known RGB channels (red, green and blue) and the fourth parameter is the Alpha channel, which is nothing more than the degree of transparency or opacity of the color.

The Alpha channel is expressed by a value between zero and one, with 0 being fully transparent and 1 being fully opaque. All decimal values ​​between zero and 1 express different degrees of opacity.

In the world of design we may have already seen other formats or systems that support colors with Alpha channel and for this reason we may be familiar with this parameter. The PNG image format, which we love so much for supporting transparency that looks right on all possible backgrounds, implements just this alpha channel in the color definition to achieve ideal transparency.

Now, using RGBA values ​​in CSS 3, we can apply new transparencies to the colors we specify with CSS, opening up new possibilities for designers without having to mess around with little tricks like using semi-transparent background images in PNG, etc. Also, since RGBA colors can be applied to any element that supports color mapping, the applications increase even more.

Updated: Alpha channel for colors in RGBA format is available in all current browsers.
The only drawback, at least as of this writing, is that CSS 3 is not widely supported by all browsers. For example Internet Explorer 8 does not support it at the moment.

At .com we have published several articles on CSS 3, which can be accessed from the following link: .

RGBA color notation

To define an RGBA color, four values ​​must be specified, as follows:

rgba(255, 125, 0, 0.5);

• The first three values ​​are numbers in decimal system, which correspond to the values ​​of red, green and blue. They always have to be numbers between 0 and 255.
• The fourth value is a number between 0 and 1. For example, 0 would be totally transparent, 1 would be totally opaque and 0.5 would be 50% transparent, that is, half opaque half transparent.

Examples of CSS styles with colors defined by RGBA

Now let’s look at several examples of colors defined with CSS and the RGBA notation.

This text is green and has a bit of transparency

It was just an example, as we know that it is not good practice to specify inline styles (via the style attribute), so it would be more correct to do something like this:

We define an HTML using CSS classes:

This text is green and has a bit of transparency

Then we define the styles for these classes:

.almost-transparent-background { background-color: rgba(0, 0, 255, 0.1); } .semi-transparent-text { color: rgba(0,255,0,0.8); }

But again we draw the attention of the readers to the fact that, depending on the browser used, the different colors will be seen or not, since CSS 3 is not compatible with all systems. This example will work fine on standards-compliant browsers like Firefox, Chrome, or Safari, but not on browsers like Internet Explorer that go to war on their own.
Fortunately, we don’t need to worry about cross-browser compatibility, as CSS 3 colors with RGBA are fully supported, as you can see in the following image from Caniuse.

Example page with RGBA colors

Now let’s look at a complete example of a page that makes use of various RGBA color values. The code is the following:

RGBA colors with CSS 3

Example of layers with blue background and various transparencies

Example of layers with a green background and multiple transparencies, on top of a layer with a yellow background

Example of layers with an orange background and multiple transparencies, on top of a layer with a background image

Example of red text and multiple transparencies, on a layer with a background image

conclusion

It’s great to see how with CSS 3 and other improvements that have been appearing in the standard, an infinity of design needs have been covered, which before these possibilities existed we had to emulate through hacks. We can use RGBA colors to do all kinds of effects, from semi-transparent layers, shadows, highlight headlines, reducing color intensities without the need for calculations, etc.

I shared this opinion when I wrote this article, which is completely outdated today, thanks to the advancement of browsers: it’s a shame that this alpha channel color management is not available in Internet Explorer 8, at the time of writing these lines, because thus it becomes difficult to use this type of effects. However, presumably the folks at Microsoft will update their browser one of these years, to make it compatible with CSS 3 and RGBA colors.