Working With RGBA Colour

103 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

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

  1. Rob Hawkes

    It’s great to see 24ways back on the scene again, my favourite time of the year! RGBA is one of my favourite features of CSS3 because of, as you mentioned, its immense flexibility in setting the opacity of individual elements. The previous method of messing around with the opacity property was too cumbersome.

    I’m looking forward to seeing the rest of the articles this month.

  2. Andy Whitlock

    I look forward to seeing wider support for CSS3, very powerful features giving more flexibility within design & much simpler than hacking around – hopefully 24ways.org will have more CSS3 articles on the way soon!

    Keep up the good work, it makes great reading over the festive period. CSS3 – much better than chocolate!

  3. Jason Reed

    What is everyone using to determine RGB values? Is there a quick tool for generating RGB values from hex codes?

    I know I can do it in Photoshop or something like Colorschemer, but it’d be nice to have a dashboard widget or something equally quick.

  4. Andi Farr

    As ever, great article, and happy to see 24ways back for another year. Once again, Christmas is relegated to being the second-best thing in December!

    I only recently started using RGBA in live projects – as far as browser support goes, it’s pretty decent, what with there being an easy (and valid) way to fall back to solid colours.

    Cheers Drew! Looking forward to the the next 23 articles.

  5. Matt Hamm

    Great to see 24ways back. I’m really into my CSS3 now. I’m loving the graceful degradation/progressive enhancement approach.

    Drew, I saw you talk about this subject at an Oxford Geek night, I found it very interesting then too, nice to see it here.

    Can’t wait for the next article.

  6. Andrew Yates

    Great to see 24ways back once again, I saw one of your tweets earlier and thought “they’ll be getting the posts ready for next month” then it hit me that next month was only a few hours away.

    Still loving the design. :) Will be trying out some of your techniques on my own site shortly.

  7. Yaili

    Oh, now it feels like proper Christmas!

    RGBA, like all CSS3 features, makes our lives so much easier when setting transparencies. But, as you rightly mentioned on the article, it may not be practical for more commercial websites, with a big percentage of IE users, to use them because of the necessity of providing fallback colours.

    Still, I wish it was more widely adopted and experimented with.

    Personally, I’ve been using it more and more, in all kinds of scenarios: I’ll just grab the approximate colour for naughty browsers with the help of my dear xScope and save lots of development time with that.

    Looking forward to the next articles!

  8. Simon Hamp

    Great review of RGBA, Drew.

    Couple this with some neat CSS animations in Javascript (Use jQuery… for Strength!) and other CSS3 features (e.g. border-radius and box-shadow) for some amazing design elements.

    I love that we’re finally seeing CSS taking hold. When I first started learning HTML, the book I bought had one chapter on CSS. It made sense to me back then to separate the disciplines and centralise design. Now we’re just going crazy… in a good way… because we can!

    I say not to worry too much about IE. Users will decide.

  9. Ross Bruniges

    You can get this working with a gradient filter in IE but it only seems a good idea for static backgrounds.

    The second you start switching class names or animating your transparent elements the browser slows down to a crawl :(

    Still think it’s better to fall back to solid colour in these cases.

  10. Bjarni Wark

    That was new to me about RGBA, I am yet to read the full specs of CSS3, but that little bit you showed looks handy and can help to add that nice touch of detail to a site.

  11. Jason Karns

    I recently blogged on this very topic. I would also suggest the use of IE’s filter property. With IE’s conditional comments added into the mix, you can cover all modern browsers.

    http://jasonkarns.com/blog/2009/11/17/roy-g-biv-alpha/

  12. Ben Bodien

    Welcome back, 24Ways team!

    I love the idea of using transparency in borders to blend them in a bit to a textured or photographic background. Tiny touches like that really lift an interface.

    Varying opacity on hover is also a nice effect, but I’ve noticed a few sites doing this on elements that aren’t actually link targets, which I find distracting.

    Bring on the rest of the month!

  13. Brian Warren

    Great article Drew! Wonderful to have 24ways back again!

    One really fun thing to do with rgba is to add just a little bit of CSS animation transitions to adjust the opacity of a button or link background on hover. It’s a fun little treat for the webkit users.

  14. David Calhoun

    Thanks for the great post with all the good examples!

    Unfortunately, it looks like the PNG fallback makes a request to the server and downloads the PNG, even when the style is overwritten later in the stylesheet. So the payload is the same even for browsers that support RGBA.

    In that case, it’s probably better to use IE conditional comments (unfortunately). Or even using CSS filters (_h1 to target IE6, *h1 to target IE7, etc).

  15. Nick Caldwell

    I just created a test page to try this out. In Safari 4 on the Mac, setting opacity on borders has some odd effects at each corner, particularly with thicker strokes. It’s like each side of the box overlaps at the corner, causing an overlay effect. Hard to describe.

  16. Ryan Seddon

    It’s probably worth mentioning hsla also which does the same thing but using hue/light/saturation/alpha values. Although internally hsla values do map back to rgba colours in the browsers.

  17. Chris Wallace

    I’ve been using rgba on projects for a little while and it’s been a great experience so far. The only downside I’ve seen is using rgba with javascript animation, which can cause some strange disruptions in the background when expanding/contracting elements.

  18. Devon Govett

    If you need to get support into older browsers that don’t support RGBA like Firefox 2 and below, you may be able to use canvas to emulate the effect. Firefox 2 doesn’t support rgba in CSS, but it does in canvas. You can generate a one pixel image with canvas, and set it as a background using data urls. While this might not sound like a very well performing solution, and certainly doesn’t work when javascript is disabled or the browser doesn’t have canvas support, it is a good solution for development. Once you put a site into production, you can embed the generated data url right into your css.

  19. Chris Heilmann

    I have to agree with Drew. IE hacks using expression have to die. They are performing badly, are a security flaw and really if you do your design right it should look OK without transparency, too. IE users do not expect nice designs, they are used to getting a bad experience.

  20. Tony Geer

    Nice to see 24ways back again! The fallback mechanisms were interesting as I’ve just started using rgba in my projects.

    Looking forward to what 24ways has in store this year.

  21. Mark Otto

    It’s worth noting that with RGBa borders in Safari 4.x, the corners overlap rather than form a single border. Firefox 3.5 renders them just fine though.

    Good article!

  22. Brian Hart

    Great article Drew. Amazing what fun it is to design again when you throw out the restrictions of the past and experiment with the new things we have in CSS3.

    @JASON REEDCSSEdit has fantastic support for RGBa using the standard Leopard color pickers and opacity slider. Would love to see that added to Coda, etc.

  23. Jason Weaver

    As Nick Caldwell already pointed out, you get funny looking overlapping corners in Safari on Mac when using RGBA borders. I’ve been playing around with it for some time and found that you can tweak the intensity of the alpha channel up or down on two sides that are parallel. (top and bottom or right and left) Example Code:

    border: 10px solid rgba(220,220,220,.05); border-bottom: 10px solid rgba(220,220,220,.06); border-top: 10px solid rgba(220,220,220,.06);

    This renders a better effect for thicker borders and needs to be tweaked a little for certain colors but overall I find it works well.

  24. MrQwest

    Great first article Drew! I’ve been looking forward to 24ways returning for a while now!

    I’ve been using RGBA a lot more over the past few months having recently read up on it (I hadn’t initially understood the difference between RGBA & Opacity) and as other people have said, it’s really flexible which is why it is a joy to use!

  25. Ryan Downie

    Drew,

    Instead of putting both version’s so IE will work have you looked in to using Modernizr? http://www.modernizr.com/docs/

    This lets you add a class so only browsers that support RGBA will see the stlyes and ones without will fall back specified in the css.

  26. Dave Sparks

    Nice kick off to 24 ways.
    However I’m pretty sure your method for supporting IE won’t work.
    If I remember correctly it will write the rgb colour then attempt to write the rgba colour get confused by the “a” bit and give the element a default colour (Or so Andy Clarke tells me).
    So for a h1 it will write the rgb colour, then try and write the rgba get confused and fall back to the default of black.

    The easiest way around this would be to use something like modernizr.

  27. Pete

    I’ve found rgba works really well in conjunction with text-shadow and box-shadow properties.

    Browsers that support those also support rgba, so you can always use rgba and take advantage of the opacity control.

  28. Andy Clarke

    24ways is back. Now I’ll have to start staying up until midnight again every night to read it as soon as it ‘comes out’.

    @Dave Sparks: Don’t bring me into the argument (no wait… you did). From working with RGBa on the recent CannyBill project (and others), I found that IE7 would choke on the rgba properties.

    It would apply the first RGB values, then choke when it read the RGBA values. Because it understood the second color property (but not values) it would revert to browser default. Hex values on the other hand seemed to be fine.

    Of course I could be wrong (as I usually only give IE a minute or two) and there are much cleverer people here who deal with IE much more regularly than I do (poor souls).

  29. Russell Bishop

    Great article, using rgba is my new year’s resolution!

    One thing I do wonder about is when you mentioned using .png’s as a fallback for older browsers.

    If you’re going to make a .png alternative for every rgba you’re using, why not simply just use .png’s in the first place?

    Can’t wait for tomorrow!

  30. Seth Ridley

    I’m new to this site having just had the URL passed on by Darren Turpin, but this is a first class, stand up tutorial. I’m subscribing in the hope that th remaining 23 are as good and informative as this one, and crossing my finger’s that there’ll be a few without the standard “does not work in IE” disclaimer!

  31. Nice article. I also think it´s better to use fallback colors for IE than the filters. I avoid IE Hacks wherever I can. It keeps the code clean and maintainable.

  32. Martin Klepsch

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

    Am I right in the assumption that this actually loads black50.png first?

    This would abolish the speed benefits you get from using rgba();.

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

    I’m not sure how that renders.
    But for me it seems logical that browsers like FF, Safari, Co. are ignoring the second background property.

    Of course this would remove some flexibility because you are using !important.

    Just an idea & not tested (yet).

    Regards,
    Martin

  33. Derek Fowler

    That’s a powerful addition to CSS and this site design really shows it off. Google Chrome seems to have real issues rendering it on my machine though – the page won’t scroll properly, it’s really jerky. Firefox is fine though. Anyone else having that trouble?

    Looking forward to tomorrows post ;)

  34. Jon

    Great article but I was curious about one thing. In your last example your screen-shot shows the nice transparent borders but you have not mentioned the need to use the background-clip property to get this affect. Without it the border sits on top of the background colour.

    Therefore the code sample at the end should in fact be:

    div{ color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border: 10px solid rgba(255, 255, 255, 0.3); -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding;
    }

    In my quick test it doesn’t seem that Opera support background-clip and of course this generates the odd corner behavior in Webkit that others have mentioned.

  35. Dan

    Fantastic first article. It’s great to have 24ways back! :)

    I can imagine I’ll be experimenting with rgba in the very near future thanks to this.

  36. David Goss

    Great article Drew – I love any way to speed up pages without harming the aesthetics, and I’m sure IE will catch up in their next version – they’re not so bad at that these days.

    There’s one thing I think is missing from this technology. In your ‘HEADER 1’ example, you’ve shown the BODY with a patterned background, the DIV with a solid white and then some RGBA transparency on the H1 so it partially shows through to the DIV. What if you wanted the type to show through all the way to the BODY background but still keep the rest of the DIV solid white?

    I suppose there would have to be another property where you specify through how many elements you want to ‘burrow’ the transparency. Unless I am being dumb and there is a way?

  37. Graeme

    Excellent article to start this year with.

    Never worked with rgba values before but after reading this I’ll definitely be experimenting with it now in some personal projects to see how I get on with it.

    Could be a useful technique with image heavy sites

  38. Derek Organ

    I love the look of this site and the use of CSS3. Only found it for the first time today. Surprised I have heard of it before. Great idea.

    Well done and I look forward to the rest of the articles this month.

  39. Kevin Flavin

    First time reader, found your post on twitter from @smashingmag. It’s really refreshing to read comments from actual people!

    *For Sean Reed above, I use Instant evedropper on windows to snatch colors off the screen and it allows about a half dozen of reporting choices.

    *For Nick Caldwell – post a link, I want to see what you’re talking about

    *For 24ways – After reading the article, I ran your site thru my IE emulator tool, and it looks ok in IE7, but returns to the flat 100% opacity in IE8. As for IE5 – wow, it looks like crap. But I don’t think we have computers running on vacuum tubes anymore, so those IE5 users, all 3 of them, need to spend $300 at wal-mart and upgrade.

    Great article, guys, I’m adding you to my daily read list.

  40. Garrett Winder

    Great first article.

    For those of you wondering, Digital Color Meter is a quick way to find RGB values and comes stock on the Mac. Set it to “RGB as actual value, 8 bit” and you’re golden.

    Looking forward to the next 23!

  41. Bobby Jack

    Great article – and a welcome return for 24ways. I’ve been meaning to give RGBA a workout ever since reading Dan Cederholm’s latest book, and this might just be the kick up the backside I need!

    I won’t be giving IE users any hacky workarounds, though. Quite apart from the extra unnecessary effort, we’ve got to stop giving users excuses to stick with IE6. Sorry, but if you’re using IE6, you don’t get the full set of effects supported by modern browsers, even if it’s technically possible by jumping through flaming hoops.

    We need to keep pushing the message that not every website can, should, or does look the same for every visitor.

  42. car booster seat

    I like the idea of using CSS rather than PNG’s – even in days of double figure broadband size is still important. I’m also hoping more design control (without the size overhead) is going to allow me to realise the mockups I work into html/css for some of my ‘print orientated’ designer friends.

    I am concerned that the effort required in creating the IE fallback version will result in me tearing my hair out with frustration!

  43. Matt Hobbs

    Great first article, really looking forward to the rest.

    A useful (or atleast i have found it useful) plugin for Firefox when working with colors is Colorzilla.

    Shows RGB and Hex in the status bar when the picker is selected, saves jumping into photoshop.

  44. Clay McIlrath

    I don’t feel that rgba is really a very practical solution just yet.. since IE doesn’t support it. As web developers we have to support all the major browsers while being as efficient as possible. This means we have to support IE7 and 8 whether we want to or not. While you can get away with CSS3 rounded corners and fallback on standard square corners in IE, the use of transparency is often important to the aesthetics of the site/design and a fallback solution to standard RGB is not a practical solution in that case. PLUS, unless you specify the PNG image in an IE conditional-based stylesheet, your making ONE MORE http request for a png image for each transparency which is bloat that shouldn’t be there.

    Overall.. i think this is a promising future, but premature to getting excited about just yet. Unless you really want to take the time to write out IE conditional styles, i think it’s better to put this one on that backburner for a while.

    With that said, I still greatly appreciate the article and agree with the others, that it’s awesome to have you back!

  45. Adam Rivard

    Great article to start off with. I’m just starting to adopt the new features of CSS3 and will definitely be using rgba in projects to come. Looking forward to more tips to come.

  46. Starla Insigna

    24 Ways is back! I hadn’t even realized how close it was to Christmas until I saw an unread post under “24 Ways” in Google Reader. I’m very excited for 23 more interesting and useful posts!

    RGBA is fantastic (I’ve been using it on my blog since CSS-Tricks wrote about it) and there is an alternative fallback for IE that allows you to use alpha colors using “filter:progid:DXImageTransform.Microsoft.gradient” and a conditional stylesheet. I just realized, however, that many other people have suggested that, so, I guess I don’t have anything unique to mention. Oh well.

  47. Great to see you again!

    Very very nice and useful article. Gonna use it in the future.

    I really like this sites design. A very good show-off of the skills of CSS!

  48. suit

    sure rgba() is cool – but why is the alpha channel given in a 0 to 1 value? why it isnt 8-bit too like in all other 24+8 bit RGBA color spaces?

    I understand that it depends on the already specified type “alphavalue” – but why not using a more common notation instead?

    and of course – why not allow 32 bit hex values? what is so wrong for FF000080 for 50% red?

  49. Martin Klepsch

    Just for your information:
    When using it the way as described in the article:
    1. h1 {
    2. background: transparent url(black50.png);
    3. background: rgba(0, 0, 0, 0.5) none;
    4. }

    Webkit-based browsers will actually load the image due to a bug (https://bugs.webkit.org/show_bug.cgi?id=31630).

    Gecko-based browsers (or at least Firefox) will not download the unneeded image.

    So a workaround to avoid loading of unneeded images like described in my comment above is not needed.

    Browsers will download the image (Webkit) or not (Firefox), no matter what you do.

    You dont believe > Demo

    To the 24Ways Team:
    It would be great to have a more powerful discussion platform like DISQUS here. Some days ago there was an article that points out that discussions are actually one of the most important pieces of the web. And I think that’s true.

  50. Kyle Agronick

    I just fired up internet explorer to see how this site looks. How disappointing. This is an amazing design. Its a shame how terrible the support is on Internet Explorer for this. We have all these great features now but we are going to have to wait years for them to go mainstream so we can utilize them without hacks. I hate writing browser specific code. Its twice as much work.

  51. Derek Anderson

    It’d be nice if we could have Hex with alpha like you can in OpenGL, etc. something like #rrggbbaa so rgb(255,255,255, 0.5) would be #ffffff80,

    I agree with Drew, that you should take into consideration your audience and what browsers they use. I doubt anyone visited this site using IE6 as their preferred browser…

    @JASON REED – I use this to convert from HEX to RGB and vice versa : Color Conversions

  52. Jim Moran

    I think the disappointing thing about the IE support of this design is that it looks “as it should” in IE7, OK in IE6 and really poor in IE8.

    Although I do appreciate IE represents a tiny percentage of the target audience for this site.

  53. Leroy Kid

    Nice post, Dan Cenderholm’s new book has a few things about RGBA too. I can imagine some really cool stuff to do with this, I will use the techniques on the redesign of my commercial website, afterall it’s mine.

    I like your backup methods, pretty thoughtful.

  54. Anthony Brewitt

    A wake up call to start playing with transparency in my designs again, yeeee, but unitl IE gets its act together I still have some reservations as to how productive it is to have CSS transparency and also .png transparency techniques on one project.

    I think the clients budget will reflect whether I get to play with these techniques on a real project.

  55. Antonella

    Great article! I didn’t know about transparency with CSS and now I feel I can start using it with your clear steps, code and image examples. Even though it’s not available in IE, your fallback steps seem easy enough. Thanks.

  56. Ian Lloyd

    Great article, Drew. No Bagpuss mentions, though? ;-)

    One word of warning though – using rgba on a wide scale can cause some real issues in some browsers when you try to scroll/resize a page.

    I’ve noticed it on this site – using Firefox 3 on Win XP (I’m at work!) – where I click and drag the scroll bar and there is a very noticable lag between when I let go and when the browser catches up and renders the page at that point. It seems very sluggish, and this is not a low-powered PC. By contrast, if I disable the style sheet and try scrolling up and down, it is zippy as hell. Switch back, problem returns. Try doing the above with the Task Manager > Performance tab and you’ll see the difference in CPU usage as it tries to render the rgba CSS page as you scroll compared to the non-CSS version.

    However, trying the same in Firefox 3.5/Mac OSX it’s perfectly OK. So, be sure to check in other browsers, as you may have issues that you were not previously aware of.

    FWIW, I’ve started to use rgba on small discrete pieces of the site at work, but working for a corporate and with high IE6 usage (100% IE6 usage inside company), means that’s about as far as I could take it for now.

  57. Adrian Rodriguez

    I love this. I have used it in May of this year for a nav menu on http://mulhallok.com and I got the exact effect I wanted, but of course I didn’t know how to get it working in IE, so it doesn’t look as impressive.

  58. Phil Ricketts

    Just to make you all aware, I’m having the exact same issue as @Malarkey regarding RGBA fallback and IE7:

    http://24ways.org/2009/working-with-rgba-colour#c003155

    Still looking for a solution. FFS.

  59. Laneth Sffarlenn

    For someone who’s only just recently started to learn about the “opacity” selector and the work involved in getting cross-browser support for it, this is excellent news and your article is just so immensely helpful!

    Thanks so much from a beginning designer!

  60. Billy

    Thanks guys this really opened my eyes to a new way of thinking about page layout and design. Man does that make it sound like I’ve been doing this for a while, about 6 months since I first started learning. I would love to make use of this and your other insights on my site design.

  61. Sankho Mallik

    In response to Andy Clarke’s comments about IE rendering default colors when faced with rgba, I just figured out a work around. Hopefully someone else hasn’t posted it yet; then I’d feel silly!

    Basically, in my global link rule (a, a:link, a:visited { yadda }) I had a default color of #fff, and an rgba value right after of (255,255,255,0.8). However, in IE7, it would jump back to purple. Not exactly what I was going for.

    Anyway – all I had to do was duplicate the line, so I had two selectors for a, a:link, a:visited { } sitting on top of each other. In the first one, I put the regular hex color – #fff. The second one, I put the rgba. And like magic it worked without choking!

    Oh ie, you cheeky bastard you.

  62. Pankaj

    I’ve spend several hours today at this blog for learning CSS3. Learning new things with every post. Thanks again for the great tutorials.

  63. EDBT

    Overall i think this is a promising future, but premature to getting excited about just yet. Unless you really want to take the time to write out IE conditional styles, i think it’s better to put this one on that backburner for a while.
    With that said, I still greatly appreciate the article…

Impress us

Be friendly / use Textile