Note: This story was dynamically reformatted for online reading convenience. jQuery.fn.addColorPicker = function( props ) { if( ! props ) { props = []; } props = jQuery.extend({ blotchElemType: 'span', blotchClass:'ColorBlotch', clickCallback: function(ignoredColor) {}, iterationCallback: null, fillString: ' ', fillStringX: ' ', colors: [ 'transparent', '#ffffff','#d0d0d0','#777777','#000000', // monochromes '#ffaaaa','#ff00ff', '#ff0000','#aa0000','#9000ff', // reds '#ff6c00', '#ffff00', '#ffbb00', '#f0e68c','#d2b229', // browns/oranges/yellows '#aaffaa','#00ff00','#00aa00','#6b8e23','#007700', // greens '#bbddff','#00ffdd', '#aaaaff','#0000ff','#0000aa' // blues ] }, props); var count = props.colors.length; for( var i = 0; i < count; ++i ) { var color = props.colors[i]; if( ! color ) color='transparent'; var elem = jQuery('<'+props.blotchElemType+'/>') .addClass( props.blotchClass ) .css( 'background-color',color); // jq bug: chaining here fails if color is null b/c .css() returns (new String('transparent'))! elem.html( ('transparent' == color) ? props.fillStringX : props.fillString ); if( props.clickCallback ) { elem.click( function() { props.clickCallback(jQuery(this).css('background-color')); }); } this.append( elem ); if( props.iterationCallback ) props.iterationCallback( this, elem, color, i ); } return this; };