Aarron Walter

Color Mixing With RGBa

Nov 1, 2010

A few months back I launched a long overdue redesign of this site. I’ve often thought of the content on my site as information layers, like the strata you would see in a cross section of the earth. Perhaps it’s an expression of my subconscious memories of growing up in the midwest where the earth and agriculture are a central part of life. Though I’ve long since moved away, the landscape still drives my aesthetic. Similarly, web pages stack content sections. A blog post, for example, would have a layer for the article, a layer for meta data like tags, and yet another layer for comments.

The new site design reflects that concept by structuring each page as an unordered list grouping each content layer as a list item. Just as the strata of the earth change color as you descend, I wanted to let content layers darken in the content stack to reflect a hierarchy of information. I also wanted to use color to define the various sections of the site not only to create visual distinction that can inform navigation and location recognition, but also to simply pacify my fickle design aesthetic. Varying the color of the strata and the color of each page or section of a website makes for a lot of color mixing.

To pull this off, I had to find a solution that was practical. I couldn’t see myself manually defining the color for each list item in a page. I am too busy (read as lazy) to make a lasting development and maintenance commitment. Doing it manually would certainly keep me from publishing as frequently on my site.

RGBa to the Rescue

My idea was made ever so simple through the use of RGBa, an elegant way to define color in CSS with an alpha channel making transparency easy. RGBa has four values: one each to define red, green, and blue, and one for alpha transparency. Here’s a simple CSS code example:

.myelement { background: rgba(255,255,255,0.25); }

In this example, the background color is being set to black at 25% opacity. The cool thing about this approach is that you can stack color blocks to mix hues, add white to a color to create a tint, or add black to create a shade. To create the shades in my strata design concept, all I had to do was set a base background color of a page, then set a transparent black background on of each of the strata to crate shades getting ever darker as you get further down the page. I called my content list “stratosphere”, and set the class “strata” on each list item (note: the list item class was necessary to prevent the script we’ll see shortly from applying colors to any list I might drop in a page.). The CSS looks like this:


	.home #stratosphere { background:#4681bd; }
	.home #stratosphere li.strata { background: rgba(255,255,255,0.25); }

That solves the color mixing problem, but it doesn’t solve the challenge of automatically setting the background color on each of the strata, and varying the opacity of the black overlay to create the color shift effect as you scroll down a page. To do that, I had to use some simple jQuery. In order to get a smooth transition between the shades of the strata, I had to first figure out how many layers are in the page, then divide 1 by that number to get the increment of opacity change (note: with RGBa, 1 is 100% opaque, hence dividing 1 by the number of layers). So if there were five layers in a page the equation would be: 1 ⁄5 = 0.2. That means we’d increase the amount of black in each layer by 20%. Here’s that simple math expressed in JavaScript:


	// Draw Layers
	var numLayers = $('#stratosphere .layer').size();
	var alpha = 0;
	var alphaIncrement = (1/numLayers);

Once you know the increment of change, all you have to do is loop through the list items to dynamically set the RGBa value bumping up opacity as you go.

	
	$('#stratosphere .layer').each(function(){
		$(this).css("background-color","rgba(0,0,0,"+alpha+")");
		alpha = (alpha+alphaIncrement);
	});

Now I can simply change the background color of the stratosphere list, and the color mixing to create the various layer shades will happen automatically.

You can also use RGBa to make buttons and navigation that will work with any color palette, as I’ve done on this site as well. Semi-transparent buttons inherit the color on which they sit, as does a semi-transparent navigation bar. The result is a site composed of flexible components that adapt to any color situation. The color mixing possibilities with RGBa are endless.