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.
Due to mootools breaking with new browsers, we are not providing our JavaScript tools at this time. New versions will be released soon
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
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;
}
});
Custom Search
