或者你和我一样，一开始对于如何去做一个调色板毫无思路。尤其在看到网上以及工具中各种形形色色的调色板后，更加不知所措。其实说到调色板，在html5中已经新增了获取颜色类型的文本框，即只需要一个 <input type=”color”/>，然后再获取input的值即可，你可以 点此 来更多的了解这个新增元素，由于是html5元素，因此只有chrome和firefox能支持。自然，这个颜色文本框不是本篇所讨论的内容。

生成调色板

调色板主要的内容分为颜色格式和颜色种类。在web中常用的几种颜色格式主要有六位的十六进制、RGB以及HSL，在这里我们采用最普遍的十六进制。那么颜色种类呢，在调色板中显示多少种颜色才合适呢？还有这些颜色之间有什么内在的关系？这些都是接下来需要解决的问题。

我们不妨打开一个有选取颜色功能的代码编辑器。我们就暂且拿Dreamweave说事吧！这也是我最初做前端时用的编辑器。当我们选取颜色时，会看到一个这样的界面：

经过几次鼠标经过以及颜色的读取，我们发现一个这样的规律：

也就是说，从第四列开始，可以把剩下的列分成6个含有6*6种颜色的色块，这六个色块自左向右，自上而下排列，每个色块的基础色调分别是以 0，3，6，9，c，f 。我们知道，三个数值就能组成一种颜色，假设 colorBaseArr = [“0”,”3”,”6”,”9”,”c”,”f”]，那么每个色块中的颜色值是由 基础色调+ colorBaseArr的双重循环。

主要的html代码如下：

<div class="color-panle">
    <div class="color-read">
    	<span class="color-val"></span>
        <span class="color-show"></span>
    </div>
    <div class="color-list"></div>
</div>

.color-val 的span用于显示颜色值，而.color-show的span则用于预览颜色。接下来，我们在.color-list中填充颜色列表，假定每个色块为一个ul，那么每个ul中就有6*6个li：

var colorBaseArr = ["0","3","6","9","c","f"];
var createColor = function(baseColor){
	var colorLiStr = ‘’;
	for(var j=0 ; j<6 ; j++){
		for(var k=0 ; k<6 ; k++){
			var tempColor = baseColor + t.colorBaseArr[k] + t.colorBaseArr[j] ;
			colorLiStr += "<li data-bg='"+tempColor+"' style='background:#" + tempColor + ";'></li>";		
		}	
	}
	t.htmlStr +="<ul data-base='"+baseColor+"'>" + colorLiStr + "</ul>";
}
 
for(var i=0 , len=t.colorBaseArr.length; i<len ; i++){
	createColor(t.colorBaseArr[i]);
}

这样，调色板就生成完成。

读取调色板

上文的内容描述了调色板的生成，接下来我们需要预览颜色，当点击其中一种颜色时，还应该获取选中的颜色值，对生成的颜色列表加入交互事件，由于列表数量较多，此处我们采用事件代理：

var colorPanle = ele.byClass(".color-panle",colorPanle)[0],
	colorList = ele.byClass(".color-list",colorPanle)[0],
	colorVal = ele.byClass(".color-val",colorPanle)[0],
	colorShow = ele.byClass(".color-show",colorPanle)[0];
 
var colorRead = function(eventType,e){
	// showColorPanleEle 触发调色板显示的元素
	return function (e){
		var e=window.event || e,
			target= e.target || e.srcElement;
		if(target.nodeName.toLowerCase()==="li"){
			switch (eventType){
				case  "mouseover" :
				colorShow.style.background = colorVal.innerHTML = "#" + target.getAttribute("data-bg");
				break;
				case "click" :
				showColorPanleEle.value = "#" + target.getAttribute("data-bg");
				colorPanle.style.display = "none";
				break;
				default:
				return;
			}
		}
	}
}
 
eventUnit.addEvent(colorList,"mouseover",colorRead("mouseover"));	
eventUnit.addEvent(colorList,"click",colorRead("click"));

应用调色板

如你所知，在页面载入后，调色板是默认不可见的。就像编辑器里一样，在需要选取颜色的时候调色板才插入到页面或者显示出来，因此，我们需要把它改为用户手动触发，封装以上代码，最后您可通过以下描述使用调色板：

1.引入colorTake.js文件
2.页面加入触发的html，并实例化colorTake

<input type="text" value="" id="color-get"  />
var colorGet = document.getElementById("color-get");
new colorTake(colorGet );

点击预览 调色板demo 。