<div class="box">
	<h2 class="title">ColorPalettes.</h2>
	<div class="canvas-box">
		<canvas id="canvas" width="400" height="400"></canvas>
	</div>
	<div class="control-box">
	</div>
	<a id="importPng" href="javascript:void(0);" class="btn btn-default btn-sm">S a v e</a>
	<div class="copyright">thank <a href="http://colorhunt.co">colorhunt</a></div>
</div>
body{
	background:#fff;
	font-family:Tahoma;
	text-align:center;
}
h2,h4{font-weight:600;}
h4{
	text-align:left;
}
ul{
	margin:0;
	padding:0;
	list-style:none;
}
.box{
	width:360px;
	box-shadow: 0 0 30px #d8c6c6;
	margin:30px auto;
	padding:20px 30px;
}
.title{
	display:inline-block;
	/*background:#000;*/
	color:#f1726a;
	padding:3px 8px;
	border-radius:8px;
	/*display:none;*/
}
.canvas-box {
	padding:10px 20px 30px;
}
#canvas{
	box-shadow: 0px 28px 67px -14px #c1aaaa;
  border-radius: 100%;
  padding: 8px;
	width:200px;
	transition:transform .2s,filter .2s;
}
#canvas.animate{
	transform: scale(1.2);
	filter: blur(10px)
}
.control-box{    
	border-top: 1px dotted #dedede;
  padding-top: 20px;
}
.palette-box{
	font-size:0;
	text-align:left;
}
.palette-item{
	display:inline-block;
	width:25%;
	padding:8px;
	position:relative;
}
.palette{
	height:59px;;
	width:59px;
	display:block;
	padding:0px;
	border-radius:10px;
	transition:all .2s;
}
.palette:after{
	content:'';
	font-family: 'Glyphicons Halflings';
	position: absolute;
	font-size: 24px;
  color: #fff;
  text-shadow: 0 0 15px rgba(140, 81, 81, .5);
	width:53px;
	line-height:53px;
	text-align:center;
	display:block;
	transform: translate(0,20px);
	transition:transform .2s;
}
.palette-item.actived .palette{
	padding:0;
	/*border: 14px solid rgba(255, 255, 255, 0);/*效果(晶格)*/
	border-radius:13px;
	border: 3px solid #ffffff;
  box-shadow: 0 0 5px #d09d9d;
	filter:grayscale(50%)
}
.palette-item.actived .palette:after{
	content: "\e013";
	transform: translate(0,0);
}
.palette-item .palette:hover{
	transform: scale(1.2);
}
.copyright{font-size:12px;color:#999;margin-top:20px;}
.copyright a{font-weight:600;color:#f1726a}
@media (max-width: 800px) {
	.box{width:100%;padding: 20px 10px;margin:0;}
}
$(window).ready(function(){
	init();
	canvasShow();
	$('#importPng').click(function(){	window.open(convertCanvasToImage(document.getElementById('canvas')));
	});
}) 

function canvasShow(colors){
		//顺序从远到近,从左到右
		// a     b
	  //ce      d
	  //    g  f
		var colors = colors || ['#f06868','#fab57a','#edf798','#80d6ff'],
				data = {
					a:{main:{x:126,y:76,w:60,h:120}},
					b:{main:{x:248,y:148,w:72,h:82}},
					c:{main:{x:42,y:170,w:70,h:100}},
					d:{main:{x:292,y:178,w:42,h:104}},
					e:{main:{x:94,y:166,w:66,h:138}},
					f:{main:{x:270,y:222,w:42,h:84}},
					g:{main:{x:192,y:246,w:56,h:66},extend:{x:208,y:226,w:24,h:34}}
				},
    		canvas = document.getElementById('canvas'),
				context = canvas.getContext('2d');
	context.clearRect(0,0,400,400);
	
		//渐变背景
		var	lGrd = context.createLinearGradient(0,400, 0, 0);
		lGrd.addColorStop(0.08, colors[0]); 
		lGrd.addColorStop(0.36, colors[1]); 
		lGrd.addColorStop(0.45, colors[2]); 
		lGrd.addColorStop(1, colors[3]);
    context.beginPath();
    context.arc(200, 200, 200, 0, Math.PI * 2, true);
    context.closePath();
    context.fillStyle = lGrd;
    context.fill();
	
		for(i in data){
			for(j in data[i]){
				addRect(context,data[i][j]);
			}
		}
}

function addRect(context,data){
			context.beginPath();
			context.fillStyle = getBg(context,data.x-1, data.y + data.h);
			context.fillRect(data.x, data.y, data.w, data.h);
			context.closePath();
			context.fill();	
}

function getBg(context,x,y){
	var imageData = context.getImageData(x, y, 1, 1),
	 		pixel = imageData.data,
	    r = pixel[0],
	    g = pixel[1],
	    b = pixel[2],
			rHex = r.toString(16),
			gHex = g.toString(16),
			bHex = b.toString(16);
	//透明度
	//var a = pixel[3] / 255
	//a = Math.round(a * 100) / 100;
	r < 16 && (rHex = "0" + rHex);
	g < 16 && (gHex = "0" + gHex);
	b < 16 && (bHex = "0" + bHex);
	return "#" + rHex + gHex + bHex;
}

function convertCanvasToImage(canvas) {
	//var image = new Image();
	//image.src =
	return canvas.toDataURL("image/png");
	//return image;
}

function init(){
	//From colorhunt.co
	//$('.item.focus .place .tran').map(function(m){return $(this).text();}).get().join(',');
	//$('.item.focus .place .tran').map(function(m){return $(this).text();}).get().reverse().join(',')
	var palette = [
				'#f06868,#fab57a,#edf798,#80d6ff',
				'#57385c,#a75265,#ec7263,#febe7e',
				'#303a52,#574b90,#9e579d,#fc85ae',
				'#283c63,#928a97,#fbe8d3,#f85f73',
				'#425e92,#0c81f6,#5fe1d9,#f7fad1',
				'#f95959,#ffe1a1,#fcffcc,#d3e785',
				'#00fff5,#00adb5,#393e46,#222831',
				'#83e4b5,#3ec8ac,#4e90a4,#6e60a0',
				'#f8e796,#c98b70,#635270,#363863',
				'#adf7d1,#95e8d7,#7dace4,#8971d0',
				'#e23e57,#88304e,#522546,#311d3f',
				'#364F6B,#3FC1C9,#F5F5F5,#FC5185',
				'#2D4059,#EA5455,#F07B3F,#FFD460',
				'#ed9153,#fbd157,#fbede1,#53435b',
		'#ffbc65,#ac4c5e,#5c476f,#eeeeee'
			],
			str = new Array();
	
	for(var i in palette){
		li = '<li class="palette-item">'+
						'<a class="palette" href="javascript:void(0);" data-id="' + i + '" data-color="' + palette[i] + '"></a>'+
					'</li>';
		str.push(li);
	}
	$('.control-box').append('<ul class="palette-box">' + str.join('') + '</ul>');
	
	$('.palette').each(function(){
		var color =  $(this).data('color');
		$(this).css('background','linear-gradient(-45deg,' + color + ')');
	});
	
	$('.palette').click(function(){
		var colors =  $(this).data('color').split(',');
		$('#canvas').addClass('animate');
		setTimeout(function(){
			$('#canvas').removeClass('animate');
		},200);
		canvasShow(colors);
		
		$(this).parent().addClass('actived').siblings().removeClass('actived');
	});	
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js