Javascript - Interactive Color Picker

Today, we are going to take a look at how to create an interactive color picker using javascript, css, and html. There are a number of color picker packages out there on the web, but there isn't nearly as much on how to write one yourself and the mechanics behind how it works. Hopefully, after reading this article, you would be able to go off and write one yourself.

This tutorial builds on a number of other javascript articles on this site, including Javascript Objects - A Useful Example (which covers some basics about how objects work in javascript - and we will be using the color object created in that tutorial), Javascript - Working With Events (which covers how to work with events and event objects), and Javascript - Draggable Elements (which covers how to do dragging in javascript). So, if you are relatively new to javascript, I would suggest at least skimming those before you continue.

Below, you can see the result of what we will create today. You can adjust the hue by dragging the arrows on the color bar, and can adjust saturation and value by dragging around the small circle in the gradient square. The hex, RGB, and HSV values are output in the textboxes on the right, as well as a div containing the color picked. You can also enter values in the hex, RGB and HSV text boxes, and the correct color will show up (and the arrows and circle will move to the correct position). What we are going to create today is not a package, but it could be made into one very easily. Play around a bit - I know you want to.

Hex:
Red:
Green:
Blue:
Hue:
Saturation:
Value:

Ok, now that you've had your fun, lets dive right in. Right below, we have the html required to create the color picker:

The stuff in the bottom half is really simple - it is just a table for the text boxes and their labels. Of course, each of them has a javascript function attached to their onchange event - but we will go into what those function do later. For now, we want to take a look at the top part - the divs that define the gradient box and the hue bar. The gradient box is just a div with a 256x256 partially transparent image inside of it. This partially transparent image is what gives the gradient - the upper right corner is completely transparent, the bottom right is solid white, and the left is solid black. Setting the background color on this div creates the appearance of a saturation-value gradient in that background color. This div also contains the circle image that represents the selected point.

The hue bar doesn't require any gradient tricks - it is just a standard hue bar, where the bottom is a hue of 0 and the top is a hue of 359. The arrows are a single image sitting on top of the bar, where the center of the arrow image is transparent. The other divs represent the color box on the upper right of the color picker - it is split into two divs, one which represents the current color that you are dragging over (quickColor), and the other represents the last color that you picked (staticColor). When you finish a drag operation - either on the gradient or the bar - both divs will update to show the color that the drag operation completed on.

So now that you have an idea of what is where in terms of the html elements, lets turn to the javascript. Below, we have the initialization code for the color picker:

Obviously, not much of that makes sense at the moment, but we shall take a look one line at a time. The first line, the call to fixGradientImage, is what makes this color picker work in Internet Explorer 6. IE6, as you probably know, does not support transparency on pngs by default - and so we have to apply this hack to get the gradient image to appear correctly. The function looks like the following:

There is plenty of info on the web about what exactly this hack does in IE6, so I won't go over that here. Suffice it to say, where we had a opaque image, we now have a span with a partially transparent png.

The next line of initialization code (var currentColor = Colors.ColorFromRGB(64,128,128);) sets up the global object that will always hold the currently selected color, and initializes it to a value smack dab in the middle of the spectrum. This is probably a good time to re-introduce the color object from Javascript Objects - A Useful Example. And here it is in all its glory:

This code, as explained in that previous tutorial, creates a static Colors object which can be used to create color objects (which can take RGB, HSV, or Hex and produce RGB, HSV, or Hex). I'm not going to go into detail on how it works here - if you want to know more about it, read the tutorial.

The next two lines in the initialization hook the two elements that need to be draggable - the circle and the arrows.

The first line here declares that the element arrows is draggable and hueBarDiv is the handle. This means that if you click anywhere on the hueBarDiv, the arrows will start dragging. Then we give it a lower and an upper position bound for where we can drag the arrows, and three functions, a function to call at the beginning of dragging, one after each movement, and one when dragging completes. We set the same type of thing up in the second line, for the circle on the gradient image - but in this case the gradientBox is the drag handle - so if you click anywhere on the gradient image, you start dragging the circle.

Just as a refresher, here is the main chunk of code behind dragObj:

This code is from the Javascript - Draggable Elements tutorial. Again, since there is a very detailed discussion of the draggable code in that tutorial, I'm just going to gloss right over it here.

So back to those drag object initializations - what are the upper and lower bounds of the arrows and the circle? They are position objects (and if you don't know what our position object is, go read the draggable elements tutorial again). And here is what they are defined as:

The fact that both the lower and the upper X value for the arrows is the same number means that it can't be dragged left or right, but only up or down. The reason the other numbers aren't quite what you might expect is that these positions represent the upper left corner of the circle/arrow elements. This means that they are offset by the half the width and half the height so that the center of the elements can reach the edge of its bounding area.

So those are the bounds - now what about the callbacks? Well, first we have the start callbacks - circleDown and arrowsDown. Lets see what they do:

These two functions may be small but they accomplish a lot. Lets go over the arrowsDown one step by step. First we get the current mouse position from the event object. This is done with the following function:

Here we get the correct event object (see Javascript - Working With Events for an explanation of why), and then we get the current mouse position, relative to the element that triggered the event. Of course, Internet Explorer and Firefox do this differently, so we have the two different ways of getting the number here. Once we have that position we call the function correctOffset, and get a new position back (which we then return). This correctOffset function is rather simplistic, but serves an important purpose:

All it does is take a position and an offset (both position objects), and either applies or unapplies that offset (according to the third argument). We use it in the getMousePos function with the pointerOffset:

For whatever horrible reason, where Firefox reports the tip of the pointer to be is not actually the tip of the pointer - it is 1 pixel off in the X direction. So, we need this pointer offset value. The other two offsets listed here are much more acceptable - they are the values to get from the upper left pixel of the circle/arrow to the center point value that we need (we will be using these two offsets a bunch later).

Ok, so back to the arrowsDown code. We now have the current mouse position relative to the element that triggered the event. The next thing we do is check what element triggered the event - and if it is the arrows themselves, we add the current position of the arrows (in the Y direction) to the Y mouse position. This way we now have the mouse position relative to the hue bar. The reason we don't do anything with the X position here is that the X position of the arrows never changes. Now we call correctOffset again, but this time it is to adjust for the height of the arrows image (i.e., we adjust it using the arrowsOffset). This is so that the current mouse position ends up at the center of the arrows image, instead of at the top. Now that we have what will become the new position for the arrows, we bound it to make sure it falls within the correct range (using the lower and upper arrow bounds). Then we apply the new position to the arrows element. Finally, we call the function arrowsMoved with the new position. What all this code essentially accomplishes is to move the arrows to the point at which you clicked on the hue bar. The code for circleDown accomplishes the exact same task, but for the circle on the gradient image.

Now on to the functions arrowsMoved and circleMoved. They are called at the end of their respective 'Down' functions, and they are also called after every movement during a drag. So lets see what they do:

Again, the two functions look extremely similar. They start by offsetting the position (the position passed in is the one for the new upper-left position of the element, so we are bringing it back to the center of the their respective elements). Next we set the new current color, based on the position. For the arrows, the Y position transforms into the hue - first we flip it (since in coordinate space, 0 is at the top, but in the space of the hue bar, 0 is at the bottom), and then we scale it from the range 0-255 (the range of the hue bar image) to the range 0-359.99 (the actual range of hue that we deal with). For the circle, the Y position becomes the saturation (where again, it is flipped) and we scale it from the range 0-255 to the range 0-1. The X position becomes the new value, and here we just scale it from 0-255 to 0-1. Finally, we call a function called colorChanged:

This function is where we synchronize all the various elements of the color picker. The one argument, source is a string representing where the new values have come from. This string has three possible values - "arrows", "circle", and "box" - where "arrows" means the position of the arrows has changes, "circle" means the position of the circle has changed, and "box" means that one of the input boxes has changed.

So first in this function, we update the various text boxes - because these always need to be updated, no matter what changed. The saturation and value text boxes get multiplied up to be a percentage and then rounded to look nicer. If the source was the arrows or the box, we update the background color of the gradient div - whose color we get by taking the current hue and giving it a value and saturation of 1. If the source was a text box, we update the position of the arrows and the circle, from the current color. Essentially, we do the reverse of the calculation that we used to get from position to color. We also call a function endMovement in this case, which I will explain in a moment. Finally, we update the current color of the quickColor div to be the currently selected color.

So now we have the function endMovement, which is called after a drag operation completes on the arrows or circle, and is also called whenever a text box causes something to change. It is pretty simple, all it does is set the staticColor div to the new color:

We are actually almost done now! The final call in initialization was to call colorChanged('box');, which you understand now is to get all the color picker components synced with the initial color choice. There are only a couple more functions - and they are all extremely simple. They are the onchange functions for each of the text boxes:

Each of those functions just takes the new value from its repective text box, pushes that new value into the current color object, and then calls colorChanged("box") in order to update everyone else.

And that covers it for how to make a color picker using javascript! Hope you enjoyed it, and if you would like the raw javascript code to play around with, feel free to download it here. The html and couple lines of initialization javascript are not in that file, but you can copy all that from the boxes above or the source of this page. As always, if you have any questions, please leave them in the comments.