王新阳

https://github.com/claviska/jquery-minicolors

演示： http://www.jq22.com/jquery-info204

更多js拾色器：http://www.jq22.com/jquery-plugins%E6%8B%BE%E8%89%B2%E5%99%A8-1-jq

如果同步设置input背景色，可能会出现input内text颜色与背景色难以区分的情况，可以使用如下方法自动设置文字颜色：（hex为获取到的颜色，如：#ffcc00）

var r = parseInt(hex.substr(1, 2), 16);
var g = parseInt(hex.substr(3, 2), 16);
var b = parseInt(hex.substr(5, 2), 16);
var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
$(this).css({'background-color':hex, 'color': (yiq >= 128) ? 'black' : 'white'});

配置：

$('.js-color-input').each( function() {
	$(this).minicolors({
		control: $(this).attr('data-control') || 'hue',
		defaultValue: $(this).attr('data-defaultValue') || '#ff0000',
		format: $(this).attr('data-format') || 'hex',
		keywords: $(this).attr('data-keywords') || '',
		inline: $(this).attr('data-inline') === 'true',
		letterCase: $(this).attr('data-letterCase') || 'lowercase',
		opacity: $(this).attr('data-opacity'),
		position: $(this).attr('data-position') || 'bottom',
		swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
		change: function(hex, opacity){
			if(! hex)return;
			var r = parseInt(hex.substr(1, 2), 16);
			var g = parseInt(hex.substr(3, 2), 16);
			var b = parseInt(hex.substr(5, 2), 16);
			var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
			$(this).css({'background-color':hex, 'color': (yiq >= 128) ? 'black' : 'white'});
		},
		theme: 'default',
	});
});