JavaScript Color Picker

This is an advance color picker that handles RGB, HSL, and Hexadecimal values. It works the same way Photoshop color picker does and returns the hexadecimal value of the color. 		Download
Home Page JavaScript Tools JavaScript Color Picker

Requirements:

The color picker requires an XHTML doctype, which means your <html> tag should look like 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Try It:

Default Color Value (Red):
 


Alert the value when done:
 


Start With Blue
 


No Swatch:


Swatch and input field are the same:

Configurations:

You can customized the look and feel of the color picker by changing the color_picker_interface.html from the color_picker_files folder. Also, there are some configuration options you can set when initiating the color picker by passing an options object.

Options objects are a key: value object with the following syntax 
{option: value,
option: {option: value,
option: value},
option: [value1, value2]}
Option Description Default Value
color The initial color for the Color Picker. This property can be accessed by this.color or this.options.color #FF0000 (Red)
Example: 
var color_picker = new ColorPicker('myElement', 'Swatch', {color:'#0000FF'});
openOnClick Boolean value to open the Color Picker when the user click on the swatch or the input field or not.
If set to false, you can use the showPicker function to open the color picker		 true
Example: 
var color_picker = new ColorPicker('myElement', 'Swatch', {openOnClick:false});
color_picker.showPicker(); // will open the color picker manually
colorPickerInterface The path for the color picker interface file. 'color_picker_files/color_picker_interface.html'
Example: 
var color_picker = new ColorPicker('myElement', 'Swatch', {colorPickerInterface:'my_file_path.html'});
onPreview Event that will be fired everytime the color change on the color picker. Changing the input value and the swatch background color.
Example: 
var color_picker = new ColorPicker('myElement', 'Swatch', {onPreview: function(color){
if ((this.swatch)) {
this.swatch.setStyle("backgroundColor", color);
if (new Color(color).hsb[2] < 65) var fg_color = "#ffffff";
else var fg_color = "#000000";
this.swatch.setStyle("color", fg_color);
}
this.element.value=color;
}
});
onChange Event that will be fired when the user click the OK button. Changing the object color (and options.color) values and calling the onPreview event and the onComplete event.
Example: 
var color_picker = new ColorPicker('myElement', 'Swatch', {onChange: function(color){
this.options.color = this.color = color;
this.fireEvent("onPreview", color);
this.fireEvent("onComplete", color);
}
});
onCancel Event that will be fired when the user click on the Cancel button. Calling the onPreview event with the current color value.
Example: 
var color_picker = new ColorPicker('myElement', 'Swatch', {onCancel: function(color){
this.fireEvent("onPreview", this.options.color);	
}
});
onComplete Event that will return the current color. Mainly used for the web developer to run any action when the user select a color. Returns the color
Example: 
var color_picker = new ColorPicker('myElement', 'Swatch', {onComplete: function(){
return this.color;
}
});