Have you tried Flywheel? Learn moreJoin the best designers and creative agencies in the world. Learn more

×
How to control color opacity with RGBA in CSS

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.

Let’s review 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.

art1

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 given shade.

Why would you bother with 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 I 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.

art2

So 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:

rgba (red, green, blue, alpha)

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:

rgba (255, 0, 0, 1);

or

rgba (100%, 0%, 0%, 1);

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 yet?

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, I personally prefer 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.

art3

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

color: #ffffff;

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

color: rgba(255, 255, 255, 0.5);

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:

color: rgb (0, 0, 0);
color: rgba (0, 0, 0, 0.5);

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:

background: transparent url (something.png);
background: rgba (0, 0, 0, 0.5) none;

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. Have you used RGBA colors in your projects and designs? What’s your take on it? Share your thoughts in the comments below!

Join the discussion

Share this article:
Get more great content in your inbox

More articles

Get content like this sent directly to your inbox!

Install WordPress locally free