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.