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.
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:
/* Red with RGB */
.rgb-red{color: rgb(255, 0, 0);}
/* Red with hexadecimal */
.hex-red{color: #A90000;}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:
.content{background: rgba(255, 255, 255, .5);}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.
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Flexible Color Schemes with RGBa</title> </head> <body> <div class="box light"> <p>This is a light box</p> </div> <div class="box lighter"> <p>This is a lighter box</p> </div> <div class="box dark"> <p>This is a dark box</p> </div> <div class="box darker"> <p>This is a darker box</p> </div> </body> </html>
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:
/* This is the basis for all page color */
body{background:#DEF088;}
p{font-family:helvetica, arial, sans-serif; font-size:13px; padding:20px;}
/* Generic box shadow & formatting */
.box{-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .25); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.25); margin:10px auto;}
/* Values for white base */
.light{background: rgba(255,255,255, .3); border:1px solid rgba(255,255,255,.45);}
.lighter{background: rgba(255,255,255, .6); border:1px solid rgba(255,255,255,.45);}
.light p{text-shadow:0px 1px 0px rgba(255,255,255, .5);}
.lighter p{text-shadow:0px 1px 0px rgba(255,255,255, .7);}
.light a, .lighter a{color: rgba(0, 0, 0, .9);}
/* Values for black base */
.dark{background: rgba(0, 0, 0, .3); border:1px solid rgba(0, 0, 0,.2);}
.darker{background: rgba(0, 0, 0, .6); border:1px solid rgba(0, 0, 0,.2);}
.dark p{color:#FAFAFA; text-shadow:0px 1px 0px rgba(255,255,255, .2);}
.darker p{color:#FAFAFA; text-shadow:0px 1px 0px rgba(255,255,255, .5);}
.dark a, .darker a{color: rgba(255,255,255, .9);}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:
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.
Discussion
March 1st, 2010 at 7:15 AM
Cool tut, thanks
March 1st, 2010 at 9:38 AM
Thanks Zach. Great tutorial.
March 1st, 2010 at 9:52 AM
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…
March 1st, 2010 at 10:52 AM
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…
March 1st, 2010 at 12:09 PM
Nice resources. Thanks for sharing
March 1st, 2010 at 12:47 PM
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.
March 1st, 2010 at 3:11 PM
Nice tutorial Zach, thank you.
March 2nd, 2010 at 5:26 AM
Great tutorial, alway learning good things here. Thanks
March 3rd, 2010 at 2:12 PM
A great tutorial!
March 6th, 2010 at 3:53 AM
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.
March 10th, 2010 at 4:44 PM
Wonderful, RGBa is something I’ve never really understood before, thanks for clarifying the subject :)
March 11th, 2010 at 5:09 PM
@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.
May 12th, 2010 at 5:10 AM
I have to remember to visit this site when I am stuck. This helped my creativity.
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.