How To Control Color Opacity With RGBA in CSS

When it comes to specifying colors in CSS, the RGB color model has enjoyed immense popularity for many years now. The designer uses a combination of red, green, and blue to achieve the required tone. It’s a rather simple color model that works well.

However, the RGB color model offers tones that are flat and solid, nothing else. What if you wanted to set a color and also specify its opacity (or transparency, whichever way you want to put it)? Let’s talk about CSS RGBA colors, an extension of the RGB color model. The A stands for Alpha, which refers to the level of transparency or opacity of the color.

The theory behind the RGB model

Basically, the RGB color model is used to describe a color purely in terms of red, green, or blue. For pure blue, we will go with 100% blue and 0% of red and green. But for fuchsia, we will use 100% red with 100% blue, and 0% green.

And if we wanted to create black, basic color theory states that the absence of any color is black. Therefore, we’ll go with 0% of red, green, and blue. So RGB is sort of like mixing watercolors to arrive at a desired shade.

Why would you use RGBA?

In CSS3, RGBA is comparable to Layers in Photoshop. RGBA allows you to achieve not just the flat blue or fuchsia or black colors talked about earlier, but also a level of transparency. Think of that transparency as an additional element to use in your design. To be clear, though, CSS already has had an opacity property. You can easily specify the opacity of the entire element and everything contained within it.

However, RGBA allows you to go beyond that—you can control the opacity of individual colors, rather than the entire element. You have the flexibility to adjust the transparency or opacity of just the background or just the foreground or both, depending on your requirements.

How do you use RGBA?

Fortunately, it’s pretty simple to make use of RGBA. First, let’s talk about the syntax. Generally, an RGBA notation looks pretty much like this:

[code]
rgba (red, green, blue, alpha)
[/code]

Just like RGB, the first three values (red, green, and blue) can either be integers between 0 or 255 or percentages ranging from 0% to 100%. Also just like RGB, these values specify the amount of red, green, and blue in the desired shade. Therefore, the syntax for a pure red should look like:

[code]
rgba (255, 0, 0, 1);
[/code]

or

[code]
rgba (100%, 0%, 0%, 1);
[/code]

The fourth value denotes alpha and needs to be between 0.0 (absolute transparency) and 1.0 (absolute opacity). For example, 0.5 would be 50% opacity and 50% transparency.

Is RGBA browser compatible?

Virtually every modern web browser nowadays supports RGBA color model, so there’s not much for you to fear in the way of compatibility. However, we recommend specifying solid RGB colors as a fallback for RGBA. You’ll be on the safe side, but there’s also not much effort involved for the extra step.

To specify a solid fallback color, I rely on hexadecimal color notations. Take white, for example:

[code]
color: #ffffff;
[/code]

The above hex code will render a pure opaque white. Now, here’s how I would add 50% opacity to this in RGBA:

[code]
color: rgba(255, 255, 255, 0.5);
[/code]

All done! Again the fallback in hexadecimal is something of a personal practice for me. RGBA has been around since 2011, so basically any web browser released after IE9 can support it. And if hexadecimal isn’t your thing, you can still fall back to RGB from RGBA, using RGB notation itself. In that case, you can specify RGB colors for older browsers and RGBA colors for browsers capable of interpreting them. For example:

[code]
color: rgb (0, 0, 0);
color: rgba (0, 0, 0, 0.5);
[/code]

Of course, if you’re working with a background and transparency is something that you really must have, you also have the option of falling back on a PNG using an alpha channel. I don’t recommend using this method unless you absolutely have to. A PNG background is significantly less flexible than CSS, and you might end up using a separate PNG image for each level of transparency that you require.

However, the logic here is simple too: Specify a background using PNG that every browser can comprehend and then overwrite it using the RGBA notation. Here is how:

[code]
background: transparent url (something.png);
background: rgba (0, 0, 0, 0.5) none;
[/code]

As you can see, the RGBA color model allows you to create graphically rich designs with ease, thanks to its flexibility with precision opacity and transparency. Hopefully, this article will help you use RGBA colors in your projects and designs.

If you’re looking to make hosting your WordPress sites as easy as your RGBA notations, check our WP Engine’s plans to find the one that suits your needs!