Color picker

Last updated: April 20, 2012

Seems like there are a LOT of color pickers out there. But I really couldn't resist writing one of my own.

Try it out...

   

My color picker is designed as a flyout and a quick/compact way to set a color and adjust things like saturation and brightness easily with a gradient preview. To accomplish the gradient, I had to extend the value slider module to expose an interface for setting a two-color gradient.

The implementation is simple enough:

HTML
<img src="/Content/images/color-picker.png" color="#0000ff" class="color-picker-icon" />

JS
var picker = new WK.ColorPicker(); 

All you need is an element on your page class=color-picker-icon and the color picker will attach itself.

The color picker object itself only needs to be instantiated once, but you can set colors on multiple elements with a single colorpicker object by using a jQuery selector whic tells the color picker what to bind click to. Then it maintains the color state of the various color pickers via inline attribs on the element.

Here is the full interface to the control:

 var picker = new WK.ColorPicker({
	// represents where to set the picker relative to the top-right corner 
	// of each icon.
	popupCoords: {x:0, y:0}, 
	// path where image resources live
	imageDir:    'images/',  
	// boolean flag when set to true will hide the picker when 
	// user clicks outside the color picker container
	hideOnBlur:  true,  
	// when color picker hides without clicking ok, this will either
	// cancel (if false) or commit (if true) currently previewed color     
	commitOnBlur: false,  
	// ValueSliders object - http://thewebkid.com/modules/sliders/      
	useValueSliders: true, 
	// use alpha channel  
	alpha: false,            
	// jquery selector for color picker elements                          
	selector: 'img.color-picker-icon', 
	//events that call function pointers.			
	onColorPicked:function () {// color committed
		console.log(this, color);
	}, 
	onCancel:function () { // user cancels
		console.log(this, color);
	},
	onColorPreviewed: function () { // fires continuously while sliding
		console.log(this, color);
	}				
 });
	

Download the color picker and all necessary resources.

Enjoy!