Writing a Color Picker in JavaScript

24
Mar/071

Writing a Color Picker in JavaScript

I thought it would be cool to have a color picker for a number of dynamic web applications, so I decided to go about making one. What follows here is the basics of the first iteration of a color picker. This is by no means the most efficient that it could be, certainly not for browsers that support the canvas element. This does cover the basic ideas of creating a color picker and provides a good base to build on.

I decided to use MooTools for their Class, Element and Color objects. The Class object and functions are invaluable for writing object oriented JavaScript. The Element object is a great time saver for dealing with DOM Elements and the Color object has all the functionality built in for dealing with HSV (HSB in MooTools).

Some tips that I came across:

In general, I try to create an element once and then clone it when I need many of the same element. One thing that I ran into, that I did not know, is that the DOM cloneNode does not clone events, nor does the MooTools Element.clone() member function. As a result, you have to attach events to each cloned element.

MooTools does not encapsulate all differences between Mozilla-based browsers and IE. Specifically, I ran into this with the event object that is passed into my call back functions. In FireFox, the element clicked is event.target and in IE it is event.srcElement. I am not dissing MooTools there, I have not looked to see if there is even a way for them to deal with that difference seamlessly.

The MooTools documentation on the Color object does not specify the ranges it uses for HSV or RGB. Not all people will know that HSV ranges are different that RGB; specifically, in HSV, hue has a rage from 0 – 360 and both Saturation and Value have a range of 0 – 100%.

Another difference between IE and other standards-based browsers to make note of is the JavaScript notations for float, since float is a reserved word in JavaScript there needs to be a different name for the CSS property. The standard is cssFloat and the Microsoft/IE way is styleFloat.

Ok, now on to the code.

One of the first things I did here is add three members to the MooTools Color class. The MooTools Color class’s setHue, setSaturation and setBrightness functions return a clone of the color object with the new color set. As the color picker’s code will be changing colors over a thousand times per click on the Hue bar I would rather not incur the cost of the clone. Below is the code to add three member functions (changeHue, changeSaturation, changeBrightness) to the color class that change the color values of the color object and return nothing.

View Code

The Color Picker consists of a number of elements to facilitate the visual selection of color. On the left is the Hue Bar, which displays all 360 hues at full Value(Brightness) and Saturation, clicking on a Hue will update the SV Box. Just to the right of the Hue bar is the SV Box (Saturation Value Box). The SV Box displays the range of Saturation and Value for a given Hue. In this example we only display a sub set of the Saturation Value combinations that are possible for performance reasons. Hovering over a “Pixel” in the SV Box will display that color in the Preview box and clicking a “Pixel” will set that as the Color Pickers current color, update the Selected color box as well as the HSV and RGB text boxes. To the right of the SV Box is the Selected Color, Preview Color, HSV text boxes, RGB text boxes and the Ok and Cancel buttons. Changing any value in the HSV or RGB text boxes will update the Selected color and the respective color text boxes it the other color space. Clicking the Ok and Cancel buttons will call the associated Ok and Cancel functions, if no Ok or Cancel call back functions have been specified nothing will happen.

The code in the following link is commented so you should be able to follow everything that is going on in the class.

View Color Picker Code

Color Picker Example

This code has been tested in IE 7 and FireFox 2, if you encounter any issues in other browsers I would be interested in hearing about them especially if you have a solution as well.