【原创】网页色调配色工具

<!doctype html><html><head>
<title>网页色调配色工具</title>
<style type="text/css">
#divColor{ width: 3in; font: 9pt/5mm simsun }
#divColor div{ height: 5mm; text-align: center }
</style>
<script type="text/javascript">
var regColor = /^([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i;
function $(id){ return document.getElementById(id); }
function GetColor()
{
	var nmbA = $("iptDark").value | 0;
	var nmbB = $("iptLight").value | 0;
	var arr = $("iptColor").value.match(regColor);
	if(!arr) return alert("请正确输入颜色值。");
	var div = $("divColor");
	div.innerHTML = "";
	for(var i = 0; i < nmbA; )
	{
		var per = ++i / (nmbA + 1);
		AddRow(div,
			Offset(0, arr[1], per) +
			Offset(0, arr[2], per) +
			Offset(0, arr[3], per)
		);
	}
	AddRow(div, $("iptColor").value);
	for(var i = 0; i < nmbB; )
	{
		var per = ++i / (nmbA + 1);
		AddRow(div,
			 Offset(arr[1], "ff", per) +
			 Offset(arr[2], "ff", per) +
			 Offset(arr[3], "ff", per)
		);
	}
}
function Transition()
{
	var nmb = $("iptAmount").value | 0;
	var arrFrom = $("iptFrom").value.match(regColor);
	var arrTo = $("iptTo").value.match(regColor);
	if(!arrFrom || !arrTo) return alert("请正确输入颜色值。");
	var div = $("divColor");
	div.innerHTML = "";
	AddRow(div, $("iptFrom").value);
	for(var i = 0; i < nmb; )
	{
		var per = ++i / (nmb + 1);
		AddRow(div,
			Offset(arrFrom[1], arrTo[1], per) +
			Offset(arrFrom[2], arrTo[2], per) +
			Offset(arrFrom[3], arrTo[3], per)
		);
	}
	AddRow(div, $("iptTo").value);
}
function AddRow(div, color)
{
	var tag = document.createElement("div");
	tag.style.backgroundColor = "#" + color;
	tag.innerHTML = color;
	div.appendChild(tag);
}
function Offset(hexFrom, hexTo, per)
{
	var nmb = parseInt(hexFrom, 16);
	nmb += (parseInt(hexTo, 16) - nmb) * per;
	nmb = Math.round(nmb);
	if(nmb > 255) nmb = 255;
	if(nmb < 0) nmb = 0;
	var str = nmb.toString(16);
	if(str.length < 2) str = "0" + str;
	return str;
}
</script>
</head>
<body><div>
颜色：#<input id="iptColor" maxlength="6" size="6" value="abcdef" />
暗度：<input id="iptDark" size="2" maxlength="2" value="5" />
亮度：<input id="iptLight" size="2" maxlength="2" value="5" />
<input type="button" value="获取色调" onclick="GetColor()" /></div>
从 #<input id="iptFrom" maxlength="6" size="6" value="123456" />
到 #<input id="iptTo" maxlength="6" size="6" value="fedcba" />
渐变 <input id="iptAmount" size="2" maxlength="2" value="9" /> 次
<input type="button" value="颜色渐变" onclick="Transition()" />
<div id="divColor">
</div>
</body></html>

[您可以先修改代码再运行]