How to Create a Color Picker in JavaScript | 3
.
How to Create a Color Picker in JavaScript
Functions for the Vertical and Grid Gradients
There are two other functions that we must write. The first is for the vertical color picker, the image above:
The logic for this function is nearly identical to parts of our getHorizColor function. It takes an index from 1-->256 and returns the appropriate color. The only real difference between the two functions is the direction in which the color changes. You'll notice that our horizontal bar faded from red-->green originally. Our vertical picker does the exact opposite, fading from green-->red at the end.
We also have a simple function here, hex. hex takes an integer and returns the hexidecimal color value. 0 returns 00 and 255 returns FF, for instance. So hex(r)+hex(g)+hex(b); will always be a 6 character hex code.
Finally we need a function to get the color of any position on our larger color picker:
This "simple" function returns the color of any point on our 256x256 gradient. It takes x, y co-ordinates as well as the background color of the grid as an object with r, g and b properties. A teal color, for instance, can be represented by {r:108, g:174, b:196}.
So how does this function work? It's actually not that complicated. Using our teal color as an example, our image fades from white-->teal going left-->right. It also fades from teal-->black going top-->bottom. Since it fades perfectly even we know that the white color is directly related to the x position and the black color is directly related to the y position.
We can now re-write our function a bit more clearly:
As you can see we are basically just multiplying together the red%, white% and black%. The two "1-" simply get the numbers into the correct scope relative to one another. For example 90% white can be seen as 10% black: 1-0.9 = 0.1.
Creating the Horizontal Color Picker
Now that the logic for generating colors is out of the way we need to start actually writing the color picker.
There are many different ways to show a color picker. What we are going to do in this article is the following: We will "attach" the color picker to an input box. When our user focuses on the input box we will show our horizontal color picker. They can then pick any color from that or they can click on a button that will show them the full blown color picker.
The advantage of this method is that if our user happens to have JavaScript disabled they will still be able to manually type in a color.
To start with there are a couple of fundamental functions we need. We need a way to get the position of the input box and a way to get the mouse position:
Now we can create the basis of our horizontal color picker. We start by creating the DIV tag to show our horizontal picker. This will contain three pieces: The horizontal image we created, a DIV to show the current color and an image to allow the user to switch to the larger color picker:
Note: If we leave any whitespace between the <img> tags and the closing </div> tag we actually get that extra whitespace showing up in our DIV tag, so we must make sure that we don't leave any whitespace here.
In reality you would probably want to create this DIV using JavaScript using document.createElement, appendChild and setAttribute. This way we would be able to append our DIV to any page without needing to include the code on the page itself. Alternatively you could simply use document.createElement to create a DIV and then use the innerHTML property to create the structure. If you take a look at the JavaScript for download at the end of this article you will see that this is exactly how I did things.
Now to attach this to an <input /> tag:
Demo
If you click on the above input box you will get our fully functioning horizontal color picker. The script to do this is straight-forward using what we have already created. Our attachColorPicker function simply adds onfocus, onclick and onblur events to whatever input box we pass it. The showColorPicker function displays our color picker DIV and places it immediately below the input box.
Then we have our hColorPickerMouseMove function. This function is run when the mouse is moved over our horizontal color picker. It is very simple: we get the mouse position and we get the position of the horizontal picker on the screen. From these two objects we figure out where the mouse is relative to the horizontal color picker. We store this positioning information in our x and y variables and use those to call our getHorizColor function that we wrote earlier in this article.
Finally we set the background color of our preview DIV. If the user clicks on the color picker we change the value of the input box.
For many applications, this is enough by itself. But your user may want some finer control over what colors they pick, so we are going to keep going.
Created: March 27, 2003
Revised: Sept 1, 2006
URL: http://webreference.com/programming/javascript/mk/column3/1
Information Technology Manager (MN)
Next Step Systems
US-MN-Minneapolis
SR UI DEVELOPER - JSF - Ajax - ICE Faces - Rich Faces
Next Step Systems
US-IL-Chicago
Technical Specialist – Pre-sales (MA)
Next Step Systems
US-MA-Littleton
