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.)
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.
Chandler Server uses the
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.
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.