Recently I needed a color picker for a project and spent a little bit of time reviewing JavaScript color picker tools for integration in the application. What I found was a wide variety of tools that are either hard to implement or hard to use. That aside, there were a few that were reasonable and so I’m calling them out here should anyone need such a thing. It should also be said that there is a lot of room for improvement in the utility space should anyone want to take a stab at improving color pickers.

The most intuitive tool for non PhotoShop users is the one provided by ColorJack. The layout is typical of PhotoShop but without the RGB, CMYK and other color models being in the foreground. Those tools, while useful to designers and production shops, are meaningless to application users. The hue slider is intuitive and easy to use and the picker works in all browsers. What I did find complicated about the picker was it’s ability to easily integrate into a form that might require multiple color selections (such as a layout editor) and the Dynamic HTML placement was unreliable. It did have the least technical feel though ultimately making it the easiest to use. jQuery users be warned, you may need to tweak some of the code as there’s overlap. The widget includes the core functions it requires.

My personal favorite is from John Dyer who provides a clean PhotoShop like implementation. While I’ve not had the opportunity to use it on a site, and therefore have no experience with the level of difficulty integrating it, I have a feeling this will find it’s way into many administrative tools I’ve got on the roadmap over the next few months. The look at feel is clean and simple and the code is structured in a logical. I’ll likely be working to combine his code into a smaller package that I can easily add as a method to my input classes for the task (much like the tool below from WebReference.

The last color picker I want to call out is a detailed article on how to build useful picker from WebReference.com. It integrates cleanly multiple instances on a single form and has two different “modes” one as a simple scale (seen below) and another as a photoshop like tool. Obviously with a little time, this would be easy to modify to suit your needs (assuming you wanted to take away either the PhotoShop gradient or the color strip).

What none of these tools do is help with making good color choices. While I offer a tool to assist in finding some level of color harmony leveraging complementary colors, It would be neat if one of these tools let you find a set of colors based on the color wheel. Use mathematical operations, it’s possible to determine clash, complementary, split complementary, analogous, monochromatic and so on. Perhaps it’s time for a re-write of that tool?