Flexible Color Schemes in Layouts with RGBa

Flexible Color Schemes in Layouts with RGBa

This will be an experiment in transparency. CSS has come a long way over the years, and one of the biggest advancements is the integrated use of transparency. A few years back, transparency in web design was a compatibility nightmare, and involved a messy combination of images and alignment.

We’re spoiled today with the introduction and adoption of the CSS3 spec and widespread PNG compatibility. Today’s tutorial will take advantage of this by exploring one of these newer attributes in action.

The Goal

By the end of this tutorial, you’ll have the means to build a page layout (like the demo) that can be updated by simply changing the background. Using varying levels of transparent white and black backgrounds, we can achieve a monochromatic layout based off the background’s color value. To put it another way, all color is relative to the background and can be changed by a single value.

I’ve attached a color switching panel into the version below for demonstration purposes. It is simply responsible for updating the body’s background attribute with each color. Go ahead and give it a try now.

Monochromatic with RGBa

A Brief Intro to Web Color

Before we get started, let’s refresh with a quick primer of color in CSS. In most cases, colors are designated using either hexadecimal value or RGB triplet within the CSS stylesheet.

In RGB, colors are specified using three distinct values between 0 and 255. These values represent the amount of red, green, and blue respectively. While both methods are usable, most modern web designers choose to use hexadecimal values instead. In this system, the values are given as a single six digit code.

Both of the styles below would end up with a color red:

This has been the basis for color selection in web design for the past decade or so. But somewhere along the line, people realized that it might be good to include another option to web color. That’s where RGBa comes in.

Transparency with RGBa

RGBa is an expansion on the RGB attribute for CSS. Just like the RGB attribute, the first three values are used to specify color. The difference is an additional value. The fourth number in a RGBa set is used to specify the alpha (transparency) of the color. If we wanted to see the background image through a block of content, we could use an RGBa attribute to make the content’s background semi-transparent:

You’ll notice that the alpha value operates on a 0 to 1 scale, where 0 is completely invisible. Decimals are completely acceptable. The code above represents a white background with 50% transparency.

Varying a Base Color

Using a series of transparent blacks and whites, we’ll filter the background color into a variety of shades. The screenshot below demonstrates this concept in action. Keep in mind that this system allows an entire layout’s color to update with just one change. Now let’s put it in action.

Black and White Backgrounds

A Basic Structure

To keep things simple, we’ll start with a simple layout of four boxes with varying shades of whites and blacks. Take note of the classes assigned to each div. The “box” class is the base style for each, while “dark”, “light”, etc all represent variations of the shades. You will get a better visualization once the CSS is applied in the next step.

Now that we’ve identified all the elements, we’re ready to put everything together with a stylesheet.

Styling with CSS

One of the main roles that CSS plays in this system is to apply transparency to each element. You will notice that after the body’s background color is initially declared, no colors beyond black and white are referenced. Add the styles below to your page:

On first glance, the stylesheet appears to be more complicated than it actually is. Many of the styles outlined in the code above are variations of the same core ideas. The “dark” class, for example, is only a few digits away from “darker”.

If you’ve done everything correctly, you should end up with something like this:
A Simple RGBa Variation

Using the concepts of this sample page, you can build entire page layouts like the demonstration available for download below. I highly recommend taking some time to go through the code there, as it is more applicable to the real world (and lengthier) than the cut and dry version here.

Wrapping Up & Moving Forward

You’ll notice that transparency can be applied to more than just solid background colors. In this tutorial’s example layout, I’ve applied varying levels of transparency to text, shadows, and borders. Since the background is the only source of color, any level of transparency will cause some of the background color to filter forward.

Is this a perfect way to put together colors? Of course not. The typical shadows and borders will not have as much impact when using darker shades (e.g. blacks) of colors. It does, however, demonstrate how using RGBa for elements can allow the design’s context to affect visuals. Think of it like blending layers in Photoshop.

Further Reading and Resources

For more on the topics covered in this post, be sure to check out the links listed below.

  1. RGBa Browser Support
  2. CSS3: RGBa Today

Posted Sunday, February 28th, 2010 · Back to Top

SPONSOR

Add Comment

25 Comments 34 Mentions

  1. Andrew Conlan Author Editor

    Cool tut, thanks

    ·

  2. Slobodan Kustrimovic Author Editor

    Thanks Zach. Great tutorial.

    ·

  3. Melody Author Editor

    You’re right, we’re definitely spoiled with the unlimited opportunities in web design today, I can’t imagine the annoyances in design even a decade ago…

    ·

  4. Christian Vermeulen Author Editor

    Definitely very hopeful!
    However, I prefer to wait until IE6 is completely out of the picture and all modern browser have full support of CSS3 before using those lovely new techniques…

    ·

  5. Amberly Author Editor

    Nice resources. Thanks for sharing

    ·

  6. Ajfel Author Editor

    I would share a “multiBrowser” result – use filters for IE and you got it.

    And what to use for IE from 5.5 (yep, five point five) till the best ever IE8? Just this line:
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#rrggbbaa, endColorstr=#rrggbbaa);

    The letters (hexa) say all for loud.

    ·

  7. Bartosz Author Editor

    Nice tutorial Zach, thank you.

    ·

  8. MadRukus Author Editor

    Great tutorial, alway learning good things here. Thanks

    ·

  9. Stephan H Author Editor

    A great tutorial!

    ·

  10. Nathan H Author Editor

    I’ve been using a similar technique for years now- not sure of the IE compatibility issues, as I haven’t tested it in IE for some time (projects I’ve used the technique in, have been hobby, thus not worried about multi-browser support so much).

    Basically, I use an image sprite for my layouts; one image for the whole template. On average, this file is around 1-10kb in size, and laid out for use with a 960 grid setup. I always design my layouts with 3 shades on the background- black, middle-grey, and white. The actual interface elements, such as the header and footer backgrounds, are left slightly opaque (say, 80% alpha setting in Photoshop), and the background is hidden when saved.

    So you have a nice sprite sheet for your layout graphics, in a png with alpha. For your header div, you do the classic sprite style background position setup, and set a background color. I’ve also done a high level class, “interface”, that I’ll slap on all theme-able elements. Now you only need to change one color, to change the whole visual style. See, the opacity of the png, lets the background-color style bleed through.

    Same effect, though it doesn’t require CSS3, and with PNG alpha fix, works on pretty much all browsers, I believe. I’ve tested this setup on mobile browsers, PSP browser, etc.

    ·

  11. Johnny Author Editor

    Wonderful, RGBa is something I’ve never really understood before, thanks for clarifying the subject :)

    ·

    • Zach Dunn Author Editor

      @Johnny

      It’s surprising how long we’ve gone without paying much attention to it. Now it’s almost a regular playing in page layout for me.

      ·

  12. fix it pro Author Editor

    I have to remember to visit this site when I am stuck. This helped my creativity.

    ·

  13. Такси Днепропетровск Author Editor

    Very interesting information, thanks for article!

    ·

  14. painting melbourne – jamie Author Editor

    yeah cheers Zach, great share this is very useful.

    ·

  15. Ganesh Author Editor

    Nice Effort. But without cookie session, it will not helpful. After changing theme even if we refresh the page the theme should not be changed.

    ·

    • Sam Dunn Author Editor

      Hey Ganesh,

      The point of many of these tutorials is more a proof of concept, there is obviously always the potential need for further customization based on your project needs.

      ·

  16. Ganesh Author Editor

    I
    agree
    with
    you.
    But I mentioned
    If it has
    it will be good
    that’s it

    ·

  17. Kathrin Author Editor

    well done. thanks zach!

    ·

  18. Itep Author Editor

    Nice Tuts, tanks for your tutorials

    ·

  19. gevaar en conformiteit methoden te verbeteren. Author Editor

    I am only commenting to let you understand what a wonderful experience my friend’s princess encountered studying your webblog. She came to find plenty of things, most notably what it is like to have a great coaching nature to make folks easily have an understanding of specified multifaceted subject areas. You really exceeded visitors’ desires. Thank you for offering those important, safe, revealing and even unique tips on the topic to Julie.

    ·

  20. Criminal Lawyer Phoenix Author Editor

    Right now its still real iffy. Ill let everyone know by early January.

    ·

  21. Poopladly Author Editor

    What’s up, how’s it going? Just shared this post with a colleague, we had a good laugh.
    [url=http://mahjonggratuit.blog4ever.com/blog/lire-article-675067-8836205-mahjong_gratuit.html]jeux mahjong gratuit[/url]

    ·

  22. Spiegelschrank Author Editor

    I am of the same opinion as you do, if you consider that the man can say the same respect as you

    ·

  23. Shilpa Author Editor

    Thanks Zach! I am not in the habit of using RGB. Its quite easy, now i will try this too :D Thanks for the information :)

    ·

 

Build Internet by One Mighty Roar. Since 2008.