Ben's Sandbox
  • Projects
  • Tags

jQuery Color Plugin - The Magic Behind Color Animation


View Blog   View Source  
Show how easy jQuery.Color makes working with colors. You can seamlessly switch between RGB and HSL color spaces and use the one which works best for the type of manipulation you need to achieve. In this example, I want to incrementally change the lightness of the color until it is either white or black. I created colors using names, hash values, rgb(), and hsl() - all conveniently parsed by the plugin. jQuery UI uses this plugin to before color animation effects. However, you can also use it separately since its maintained independantly of jQuery UI (github.com/jquery/jquery-color) or, if you use jQuery UI, its already there.

As of writing this example, the plugin does not handle converting RGB white to HSL white correctly. The saturation of all grey-scale colors should be 0% (based on the Wikipedia). If white uses 100% saturation, changing its lightness from 100% will result in shades of red:

jsfiddle.net/bseth99/xxuvk

This page uses the fix I've proposed to handle the conversion properly.

© Ben Olson 2012 with help from Jekyll Bootstrap and Twitter Bootstrap