<script type="text/javascript" src="http://winofsql.jp/js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="http://winofsql.jp/js/colorpicker/css/colorpicker.css" />
<script type="text/javascript" src="http://winofsql.jp/js/colorpicker/colorpicker.js"></script>
<script type="text/javascript">
$(function(){
	$('#colorpickerHolder').ColorPicker({flat: true});
});
</script>

フラットモード
<div id="colorpickerHolder"></div>

<script type="text/javascript" src="http://winofsql.jp/js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="http://winofsql.jp/js/colorpicker/css/colorpicker.css" />
<script type="text/javascript" src="http://winofsql.jp/js/colorpicker/colorpicker.js"></script>
<script type="text/javascript">
$(function(){
	$('#colorpickerField').ColorPicker({
		color: '#0000ff',
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val(hex);
			$(el).ColorPickerHide();
		},
		onBeforeShow: function () {
			if ( this.value != '' ) {
				$(this).ColorPickerSetColor(this.value);
			}
		},
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		}
	});
});
</script>
<br /><br /><br />
このフィールドをクリックしてカラーピッカーを表示<br />
<input type="text" id="colorpickerField" />