Jump to content

Year

Day

24 Ways to impress your friends

1 12/2009 Working With RGBA Colour

by Drew McLellan

When Tim and I were discussing the redesign of this site last year, one of the clear goals was to have a graphical style without making the pages heavy with a lot of images. When we launched, a lot of people were surprised that the design wasn’t built with PNGs. Instead we’d used RGBA colour values, which is part of the CSS3 specification.

What is RGBA Colour?

We’re all familiar with specifying colours in CSS using by defining the mix of red, green and blue light required to achieve our tone. This is fine and dandy, but whatever values we specify have one thing in common — the colours are all solid, flat, and well, a bit boring.

Flat RGA colours Flat RGB colours

CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.

Don’t We Have Opacity Already?

The ability to set the opacity on a colour differs subtly from setting the opacity on an element using the CSS opacity property. Let’s look at an example.

Here we have an H1 with foreground and background colours set against a page with a patterned background.

Heading with no transparency Heading with no transparency applied

  1. h1 {
  2. color: rgb(0, 0, 0);
  3. background-color: rgb(255, 255, 255);
  4. }

By setting the CSS opacity property, we can adjust the transparency of the entire element and its contents:

Heading with 50% opacity Heading with 50% opacity on the element

  1. h1 {
  2. color: rgb(0, 0, 0);
  3. background-color: rgb(255, 255, 255);
  4. opacity: 0.5;
  5. }

RGBA colour gives us something different – the ability to control the opacity of the individual colours rather than the entire element. So we can set the opacity on just the background:

Heading with 50% opacity on just the background 50% opacity on just the background colour

  1. h1 {
  2. color: rgb(0, 0, 0);
  3. background-color: rgba(255, 255, 255, 0.5);
  4. }

Or leave the background solid and change the opacity on just the text:

Heading with 50% opacity on just the foreground 50% opacity on just the foreground colour

  1. h1 {
  2. color: rgba(0, 0, 0, 0.5);
  3. background-color: rgb(255, 255, 255);
  4. }

The How-To

You’ll notice that above I’ve been using the rgb() syntax for specifying colours. This is a bit less common than the usual hex codes (like #FFF) but it makes sense when starting to use RGBA. As there’s no way to specify opacity with hex codes, we use rgba() like so:

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

Just like rgb() the first three values are red, green and blue. You can specify these 0-255 or 0%-100%. The fourth value is the opacity level from 0 (completely transparent) to 1 (completely opaque).

You can use this anywhere you’d normally set a colour in CSS — so it’s good for foregrounds and background, borders, outlines and so on. All the transparency effects on this site’s current design are achieved this way.

Supporting All Browsers

Like a lot of the features we’ll be looking at in this year’s 24 ways, RGBA colour is supported by a lot of the newest browsers, but not the rest. Firefox, Safari, Chrome and Opera browsers all support RGBA, but Internet Explorer does not.

Fortunately, due to the robust design of CSS as a language, we can specify RGBA colours for browsers that support it and an alternative for browsers that do not.

Falling back to solid colour

The simplest technique is to allow the browser to fall back to using a solid colour when opacity isn’t available. The CSS parsing rules specify that any unrecognised value should be ignored. We can make use of this because a browser without RGBA support will treat a colour value specified with rgba() as unrecognised and discard it.

So if we specify the colour first using rgb() for all browsers, we can then overwrite it with an rgba() colour for browsers that understand RGBA.

  1. h1 {
  2. color: rgb(127, 127, 127);
  3. color: rgba(0, 0, 0, 0.5);
  4. }

Falling back to a PNG

In cases where you’re using transparency on a background-color (although not on borders or text) it’s possible to fall back to using a PNG with alpha channel to get the same effect. This is less flexible than using CSS as you’ll need to create a new PNG for each level of transparency required, but it can be a useful solution.

Using the same principal as before, we can specify the background in a style that all browsers will understand, and then overwrite it in a way that browsers without RGBA support will ignore.

  1. h1 {
  2. background: transparent url(black50.png);
  3. background: rgba(0, 0, 0, 0.5) none;
  4. }

It’s important to note that this works because we’re using the background shorthand property, enabling us to set both the background colour and background image in a single declaration. It’s this that enables us to rely on the browser ignoring the second declaration when it encounters the unknown rgba() value.

Next Steps

The really great thing about RGBA colour is that it gives us the ability to create far more graphically rich designs without the need to use images. Not only does that make for faster and lighter pages, but sites which are easier and quicker to build and maintain. CSS values can also be changed in response to user interaction or even manipulated with JavaScript in a way that’s just not so easy using images.

Opacity being changed on :hover Opacity can be changed on :hover or manipulated with JavaScript

  1. div {
  2. color: rgba(255, 255, 255, 0.8);
  3. background-color: rgba(142, 213, 87, 0.3);
  4. }
  5.  
  6. div:hover {
  7. color: rgba(255, 255, 255, 1);
  8. background-color: rgba(142, 213, 87, 0.6);
  9. }

Clever use of transparency in border colours can help ease the transition between overlay items and the page behind.

An example of border opacity Borders can receive the RGBA treatment, too

  1. div {
  2. color: rgb(0, 0, 0);
  3. background-color: rgb(255, 255, 255);
  4. border: 10px solid rgba(255, 255, 255, 0.3);
  5. }

In Conclusion

That’s a brief insight into RGBA colour, what it’s good for and how it can be used whilst providing support for older browsers. With the current lack of support in Internet Explorer, it’s probably not a technique that commercial designs will want to heavily rely on right away – simply because of the overhead of needing to think about fallback all the time.

It is, however, a useful tool to have for those smaller, less critical touches that can really help to finesse a design. As browser support becomes more mainstream, you’ll already be familiar and practised with RGBA and ready to go.

Like what you read?

Comments

Got something to add? You can just leave a comment.

Impress us

Be friendly / use Textile

About the author

Drew McLellan

Drew McLellan is Senior Web Developer and Director at UK-based web development agency edgeofmyseat.com, and the lead developer on Perch. Formerly Group Lead at the Web Standards Project, he likes to chat about microformats whenever the opportunity arises. When not publishing 24 ways, Drew keeps a personal site covering web development issues and themes and tweets a lot.

More information

In association with:

Perch - a really little cms