Usage

To use this plugin download the latest release and add colpick.js and colpick.css to the head of your documents:

<script src="js/colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/colpick.css" type="text/css"/>

Remember to fix the paths to images in the CSS if necessary. Now you may call the colpick method on any jQuery object to create a color picker.

By default you get a dropdown color picker:

Example - defaults

HTML 

<button id="picker">Show Color Picker</button>

JS 

$('#picker').colpick();

Options

Several options passed to the colpick function as an object allow you to customize the color picker, eg:

Example - Flat mode, hex layout, no submit button

HTML

<div id="picker"></div>

JS 

$('#picker').colpick({
	flat:true,
	layout:'hex',
	submit:0
});

flat boolean Flat mode just displays the color picker in place, always visible, with no show/hide behavior (see example 1). Use it with colpickShow() and colpickHide() to define your own show/hide behavior or if you want the picker to be always visible. Default: false
layout string Name of the color picker layout to use. Posible values are 'full', 'rgbhex'(no HSB fields) and hex(no HSB, no RGB). The three layouts are shown in the "Color boxes with different layouts" example. Default: 'full'
submit boolean If false the picker has no submit or OK button and no last color viewer. If false use onChange function to get the picked color. Default: true
colorScheme string The color scheme to use for the picker, 'light' or 'dark'. Default: 'light'
submitText string The text to show on the submit button if it is active. Default: 'OK'
color string or object Default color. Hex string (eg. 'd78b5a') or object for RGB (eg. {r:255, g:0, b:0}) and HSB (eg. {h:150, s:50, b50}). Default: '11ff00'
showEvent string Event that shows the color picker. Default: 'click'
livePreview boolean If true color values change while changing values on the selector or a field. Turn it off to improve speed. Default: true
onBeforeShow function Callback function triggered before the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object.
onShow function Callback function triggered when the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object.
onHide function Callback function triggered when the color picker is hidden. Use it to define custom behavior. Should receive a colorpicker DOM object.
onChange function Callback function triggered when the color is changed. Should receive HSB hash, HEX string and RGB hash in that order. This is the function that allows you to get the color picked by the user.
onSubmit function Callback function triggered when the color is chosen. Should receive HSB hash, HEX string and RGB hash in that order.

jQuery.fn Functions

These functions are the color picker's interface. Use them to control the picker from the rest of your app.

colpick The main function used to create a color picker.
colpickHide Hides de color picker. Receives no arguments. Use it to hide the picker with an external trigger.
colpickShow Shows the color picker. Receives no arguments. Use it to show the picker with an external trigger.
colpickSetColor Use it to set a color from your code. Receives a hex string (eg. 'd78b5a') or object for RGB (eg. {r:255, g:0, b:0}) and HSB (eg. {h:150, s:50, b50})

Examples

Example - HEX textfield using onChange callback

HTML

# <input type="text" id="picker"></input>

JS 

$('#picker').colpick({
	layout:'hex',
	submit:0,
	colorScheme:'dark',
	onChange:function(hsb,hex,rgb) {
		$('#picker').val(hex).css('border-color','#'+hex);
	}
});
.keyup(function(){
	$(this).colpickSetColor(this.value);
});

CSS 

#picker {
	margin:0;
	padding:0;
	border:0;
	width:70px;
	height:20px;
	border-right:20px solid green;
	line-height:20px;
}

#

Example - Color boxes with different layouts using onSubmit callback

HTML 

<div class="color-box"></div>
<div class="color-box"></div>
<div class="color-box"></div>

JS 

$('.color-box').colpick({
	colorScheme:'dark',
	layout:'rgbhex',
	color:'ff8800',
	onSubmit:function(hsb,hex,rgb,el) {
		$(el).css('background-color', '#'+hex);
		$(el).colpickHide();
	}
})
.css('background-color', '#ff8800');

CSS 

.color-box {
	float:left;
	width:30px;
	height:30px;
	margin:5px;
	border: 1px solid white;
}

Comments & Feedback

License

Dual licensed under the MIT and GPL licenses.

Based on Stefan Petre's color picker available at eyecon.ro/colorpicker