A prototype color picker class

Download the Zip file here.

The most simple, no options specified:

Select Your Color:

var cp1 = new colorPicker('color1');

With a preview box:

Select Your Color:

var cp2 = new colorPicker('color2',{
	color:'#008a20',
	previewElement:'color2-preview'
});

Inline, no popup:

Select Your Color:

var cp3 = new colorPicker('color3',{
	color:'#008a20',
	flat:true
});

With lots of other options:

Select Your Color:

var cp4 = new colorPicker('color4',{
	color:'#008a20',
	previewElement:'color4-preview',
	inputElement:'color4-input',
	eventName: 'click',
	onShow:function(picker){
		new Effect.Appear(picker.cp);
		return false;
	},
	onHide:function(picker){
		new Effect.Fade(picker.cp);
		return false;
	},
	origColor:'#000000',
	livePreview: true,
	hideOnSubmit:false,
	updateOnChange:false,
	flat: false,
	hasExtraInfo:true,
	extraInfo:function(picker){
		var colors = $A([
			  '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
			  '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',
			  'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',
			  'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
			  'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
		]);
		
		var div = Builder.node('DIV').setStyle({padding:'10px 12px'});
		colors.each(function(color){
			var div_inner = Builder.node('DIV').setStyle({backgroundColor:'#'+color,cursor:'pointer',width:'10px',height:'10px','float':'left',border:'2px solid #'+color,margin:'1px'});
			div.insert(div_inner);
			div_inner.observe('click',function(ev){picker.setColor(color);});
			div_inner.observe('mouseover',function(ev){ev.element().setStyle({border:'2px solid #000'});});
			div_inner.observe('mouseout',function(ev){ev.element().setStyle({border:'2px solid #'+color});});		
		});
		picker.extraInfo.update(div);
	}
});