Voronianski Color Picker

css

	* {
		margin: 0;
		padding: 0;
	}

	body {
  	background: #f9f9f9;
		color: #666;
		font: 11px/14px Arial, Helvetica, sans-serif;
	} 

	.color-wrapper {
		position: relative;
		width: 250px;
		margin: 20px auto;
	}

	.color-wrapper p {
		margin-bottom: 5px;
	}

	input.call-picker {
		border: 1px solid #AAA;
		color: #666;
		text-transform: uppercase;
		float: left;    
		outline: none;
	  padding: 10px;
	  text-transform: uppercase;
	  width: 85px;
	}

	.color-picker {
		width: 130px;
		background: #F3F3F3;
		height: 81px;
		padding: 5px;
		border: 5px solid #fff;
		box-shadow: 0px 0px 3px 1px #DDD;
		position: absolute;
		top: 61px;
		left: 2px;
	}

	.color-holder {
  	background: #fff;
		cursor: pointer;
		border: 1px solid #AAA;
		width: 40px;
		height: 36px;
		float: left;
		margin-left: 5px;
	}

	.color-picker .color-item {
		cursor: pointer;
		width: 10px;
		height: 10px;
		list-style-type: none;
		float: left;
		margin: 2px;
		border: 1px solid #DDD;
	}

	.color-picker .color-item:hover {
		border: 1px solid #666;
		opacity: 0.8;
		-moz-opacity: 0.8;
		filter:alpha(opacity=8);
	}

html

<!-- Easy and useful color picker -->
<div class="color-wrapper">
  <p>Choose color (# hex)</p>
  <input type="text" name="custom_color" placeholder="#FFFFFF" id="pickcolor" class="call-picker">
  <div class="color-holder call-picker"></div>
  <div class="color-picker" id="color-picker" style="display: none"></div>
</div>

js

		var colorList = [ '000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', 
'660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF' ];
		var picker = $('#color-picker');

		for (var i = 0; i < colorList.length; i++ ) {
			picker.append('<li class="color-item" data-hex="' + '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>');
		}

		$('body').click(function () {
			picker.fadeOut();
		});

		$('.call-picker').click(function(event) {
			event.stopPropagation();
			picker.fadeIn();
			picker.children('li').hover(function() {
				var codeHex = $(this).data('hex');

				$('.color-holder').css('background-color', codeHex);
				$('#pickcolor').val(codeHex);
			});
		});