jQolor JavaScript color picker

Written by Brian Vaughn

Using jQolor in a Form

To use jQolor in a form you simply need to assign a text-input as a color picker:

<input id="my-color-picker" name="my-color-picker" />

<script type="text/javascript">
	$('#my-color-picker').jQolor();
</script>

The above code will create a jQolor selector like this:

The user-selected color will be passed to the form-handler as a HEX string on form-submit.

Handling jQolor Events

You can also attach an event-handler to a jQolor picker:

<input id="my-color-picker" name="my-color-picker" />

<script type="text/javascript">
	$('#my-color-picker').jQolor(
		{
			color : '1C72B5', // Default color value
			colorChange : function( event, data ) {
				// data keys: hex, red, green, blue, hue, saturation, brightness
			}
		} );
</script>

This color picker has an event handler that modifies the graphic above it. To do this it uses the data object's "hex" property.

How to Use jQolor

1. jQolor is built on top of jQuery (1.9.1) and Bootstrap so both of those libraries must be loaded before jQolor.
2. Next define one or more text-type inputs to become color pickers.
3. Lastly, once the document has loaded, jQolor can be initialized by telling it which text inputs to decorate.

Where to get jQolor

jQolor is available on Github under the Apache license. You can download it from Github directly or from the jQuery plug-ins site.

Please feel free to contact me on Github with questions, comments, or suggestions.