Skinning and color palettes with HSV and transparent PNGs

I work on the Ajaxy Web UI for Chandler Server (a.k.a. Cosmo), an open-source server that works with the Chandler personal information manager (PIM). You can take a look at the Web UI by creating an account on our free online service, Chandler Hub.

As we started implementing more and more of the calendar features in the Web UI, I eventually needed a set of color palettes to use for each of the users’ calendars, so they can tell them apart at a glance. (Next step is letting users pick the color for a calendar like Chandler Desktop can.)

Each calendar for a user would need a palette of similar colors for the events, complete with pretty gradients to make the event blocks pop out a bit in the UI. Since this is a very JavaScript-heavy Web UI, I needed to do this in the most lightweight way possible. A bunch of different images for each separate color was not ideal due to the huge download that would require.

I ended up using two tricks together that gave me a huge variety of colors and shades, and only used two images.

Transparent PNGs for color gradients

The first trick, suggested to me by my buddy Jeremy Epstein, was to use PNG files with transparency on a color background to create the color gradients. (There are issues with transparent PNGs in IE6, but the well known alpha transparency hack makes things work relatively well.)

Here’s what the image looks like on a white background:

As you can see, it doesn’t look like much, but when you add a nice, saturated color behind it, the transparency in the PNG makes it look like an actual color gradient. Here’s what the same graphic looks like as a tiling gradient background for the calendar events in Chandler Server:

Now, with this technique, all you have to do is change the CSS background-color property of the box it’s in, and you can have basically infinite different color gradients with only one graphic. Pretty spiffy.

HSV for creating color palettes

Since we have more than just the single shade of color for event boxes on the calendar, I also needed a way to generate a set of related colors all based on the same base color for that calendar.

The second trick made this very easy — I used HSV color, and made my related colors by changing the saturation and value. So with the base hue of 210 for my blue, I can get a light blue (saturation: 10, value: 100), dark blue (saturation: 100, value 80), and so on. Changing the base hue to 120 gets me a similar set of shades in greens, and a hue of 0 gives me reds.

Of course the CSS doesn’t currently support HSV values for color — you have to specify values in hex or RGB. But color conversion is a feature of a number of JavaScript libraries, so it’s easy enough to translate your HSV colors into something your browser can render.

Chandler Server uses the hsv2rgb function in the Dojo Toolkit. (We’re using Dojo 0.4 — it looks like the color conversion code hasn’t found a home yet in 0.9.) An HSV to RGB converter is also available in a plugin for the Fleegix.js JavaScript Toolkit, which I maintain.

To convert a set of HSV values to RBG to use in your CSS, you would do something like this:

var rgbArray = fleegix.color.convert.hsv2rgb(210, 20, 20);
var rgbString = rgbArray.join(',');
someDiv.style.backgroundColor = 'rgb(' + rgbString + ')';

To tweak the shade of blue, change the second and third values passed to hsv2rgb. To change your base color, change the first parameter. Or, pull up GIMP or Photoshop, and play around with different HSV colors until you arrive at some that make you happy.

Further possibilities

These two techniques together open up all kinds of possibilities, including the ability to skin your app with minimal effort. Once you set up your HSV shades, all you have to do is change the base hue to get an entirely different set of colors. You could even let your users pick their color with a simple slider widget.

This lets you create an almost infiinte number of palettes of related colors, along with some really pretty gradient effects — with minimal download cost. Your users get some nice eye candy — and don’t have to sit around all day waiting for it to come down from the server, which is really important in a JavaScript-heavy Web-app.

If you’re interested in JavaScript or Ajax UI development, by all means come check out Chandler Server (Cosmo) at chandlerproject.org, or give us a shout in IRC in #cosmo, on Freenode.