Dynamically changing saturation in css

Question

I am creating a stacked bar chart using jQuery a bunch of DIVs. The segments of each stack are colored with different shades of gray. I would like to encode an additional global value onto the bar chart by changing the saturation of the divs to cause their color to vary from gray to some shade color, while preserving the relative brightness. The obvious option is to modify the HSL value of each element individually.

Am I overlooking some more clever way of tweaking the color of the bars? I don't think I can use the background color of the container, as the bars cannot be transparent.

Answer 1

I think this project would do exactly what you are asking for!

It adds support to animate colors using jQuery.

Check out this demo

Answer 2

I want to document the answer a bit more clearly. Following @Pheonixblade9's advice, I used the jQuery color plugin, but had some trouble getting it to work right.

1. The latest version of the jQuery color plugin that I got from github didn't work correctly with jQuery 1.4.2; when I upgraded it to 1.4.4, the errors I got related to jQuery.type not being defined went away.
2. I had to change my div structure that I was trying to color to introduce partial transparency to each element. I had up to four overlapping divs that needed coloring, and in the end what worked was setting each div's opacity to 0.3 to produce a legible grayscale range for the four levels I needed. Initially, I had just assigned grayscale values to each div with opacity 1.

3. As I noted in a comment to @Pheonixblade9's answer, the naive solution to varying saturation did not work because if the saturation value ever went to 0, the plugin would lose the hue value, and use 0 instead. To get this to work reliably, I introduced a minimum to the saturation value, which is small enough not to be visible on the monitor (I expect) but sufficient to keep the plugin code from losing the hue.

   function setSaturation($elem, score, animationDuration) {
        var targetColor = $.Color({saturation: Math.max(score, 0.01)});
        $elem.animate({backgroundColor: targetColor}, animationDuration);
    }