<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
?<HEAD>
??<TITLE>颜色搭配器</TITLE>
??<META http-equiv=Content-Type content="text/html; charset=utf-8">
??<META content="MSHTML 6.00.5730.13" name=GENERATOR>
??<STYLE type=text/css>
BODY {
?FONT-SIZE: 9pt;
?WORD-BREAK: break-all;
?FONT-FAMILY: "Tahoma", "Arial", "新宋体", "宋体";
?MARGIN-TOP: 15px;
?MARGIN-BOTTOM: 15px
?MARGIN-left: 30px;
?MARGIN-top: 30px
?FONT: 11px tahoma;
?COLOR: #555555;
?background-color:#e6e6e6;
}
.s {
?BORDER-RIGHT: 1px inset;
?BORDER-TOP: 1px inset;
?BORDER-LEFT: 1px inset;
?WIDTH: 50px;
?BORDER-BOTTOM: 1px inset;
}
.s2 {
?BORDER-RIGHT: 1px outset;
?BORDER-TOP: 1px outset;
?LEFT: 1px;
?BORDER-LEFT: 1px outset;
?WIDTH: 19px;
?BORDER-BOTTOM: 1px outset;
?POSITION: absolute;
?TOP: 1px;
?HEIGHT: 19px;
?BACKGROUND-COLOR: #e6e6e6;
}
.t2 {
?FONT: bold 36px verdana;
}
</STYLE>
??<SCRIPT language=JavaScript>
??var mover = moveg = moveb = moveh = 0;
var hs = new Object();
var rg = new Object();
rg.r = rg.g = rg.b = 0;
function click(x, s) {
?if (x < 10) {
??x = 10
?};
?if (x > 265) {
??x = 265
?}
?x -= 10;
?eval("h" + s + ".style").left = x + 1;
?eval("rg." + s + "=" + x);
?rg2hs(rg);
?ud("0", rg);
?sw.style.backgroundColor = "rgb(" + rg.r + "," + rg.g + "," + rg.b + ")";
?dom();
}
function bclick(s) {
?x = window.event.offsetX + eval("h" + s + ".style.pixelLeft-1");
?click(x, s);
}
function sc(s) {
?x = window.event.offsetX;
?click(x, s);
}
function movee(s) {
?eval("move" + s + "=0")
}
function rc(x, m) {
?if (x > m) {
??return m
?}
?if (x < 0) {
??return 0
?} else {
??return x
?}
}
function rg2hs(rg) {
?m = rg.r;
?if (rg.g < m) {
??m = rg.g
?};
?if (rg.b < m) {
??m = rg.b
?};
?v = rg.r;
?if (rg.g > v) {
??v = rg.g
?};
?if (rg.b > v) {
??v = rg.b
?};
?value = 100 * v / 255;
?delta = v - m;
?if (v == 0.0) {
??hs.s = 0
?} else {
??hs.s = 100 * delta / v
?};
?if (hs.s == 0) {
??hs.h = 0
?} else {
??if (rg.r == v) {
???hs.h = 60.0 * (rg.g - rg.b) / delta
??} else if (rg.g == v) {
???hs.h = 120.0 + 60.0 * (rg.b - rg.r) / delta
??} else if (rg.b = v) {
???hs.h = 240.0 + 60.0 * (rg.r - rg.g) / delta
??}
??if (hs.h < 0.0) {
???hs.h = hs.h + 360.0
??}
?}
?hs.v = Math.round(value);
?hs.h = Math.round(hs.h);
?hs.s = Math.round(hs.s);
?return (true);
}
function rg2html(z) {
?return "#" + d2h(z.r) + d2h(z.g) + d2h(z.b);
}
function d2h(d) {
?hch = "0123456789ABCDEF";
?a = d % 16;
?b = (d - a) / 16;
?return hch.charAt(b) + hch.charAt(a);
}
function c2r(d) {
?k = window.event.srcElement.style.backgroundColor;
?j = (k.substr(4, k.indexOf(")") - 4)).split(",");
?click(parseInt(j[0]) + 10, "r");
?click(parseInt(j[1]) + 10, "g");
?click(parseInt(j[2]) + 10, "b");
}
function h2r(hs) {
?var rg = new Object();
?if (hs.s == 0) {
??rg.r = rg.g = rg.b = Math.round(hs.v * 2.55);
??return rg;
?}
?hs.s = hs.s / 100;
?hs.v = hs.v / 100;
?hs.h /= 60;
?i = Math.floor(hs.h);
?f = hs.h - i;
?p = hs.v * (1 - hs.s);
?q = hs.v * (1 - hs.s * f);
?t = hs.v * (1 - hs.s * (1 - f));
?switch (i) {
??case 0 :
???rg.r = hs.v;
???rg.g = t;
???rg.b = p;
???break;
??case 1 :
???rg.r = q;
???rg.g = hs.v;
???rg.b = p;
???break;
??case 2 :
???rg.r = p;
???rg.g = hs.v;
???rg.b = t;
???break;
??case 3 :
???rg.r = p;
???rg.g = q;
???rg.b = hs.v;
???break;
??case 4 :
???rg.r = t;
???rg.g = p;
???rg.b = hs.v;
???break;
??default :
???rg.r = hs.v;
???rg.g = p;
???rg.b = q;
?}
?rg.r = Math.round(rg.r * 255);
?rg.g = Math.round(rg.g * 255);
?rg.b = Math.round(rg.b * 255);
?return rg;
}
function ps(x) {
?document
???.write('<td><div style="width:53;height:53;background-color:rgb(0,0,0);cursor:hand" class=s id="sw'
?????+ x + '" onClick="c2r()" title="点击选择为主颜色"></div></td>');
}
function ph(x) {
?document.write('<td><div class=t id="hc' + x + '">#000000</div></td>');
}
function ud(x, c) {
?eval("sw" + x).style.backgroundColor = "rgb(" + c.r + "," + c.g + "," + c.b
???+ ")";
?eval("hc" + x).innerHTML = rg2html(c)
}
function pl(t, c, l) {
?document
???.write('<div style="position:absolute;left:30;top:'
?????+ t
?????+ ';background-color:black"><div class=s style="width:276;height:21;background-color:'
?????+ c
?????+ ';filter:alpha(style=1,startx=360,finishx=0);" onMouseDown="move'
?????+ l + '=1;sc(\'' + l + '\');" onMouseMove="if(move' + l
?????+ '==1){sc(\'' + l + '\');}"></div><div class=s2 id=h' + l
?????+ ' onMouseDown="move' + l + '=1;bclick(\'' + l
?????+ '\');" onMouseUp="movee(\'' + l
?????+ '\');" onMouseMove="if(move' + l + '==1){bclick(\'' + l
?????+ '\');}"></div></div>')
}
function dom() {
?z = new Object();
?y = new Object();
?yx = new Object();
?y.s = hs.s;
?y.h = hs.h;
?if (hs.v > 70) {
??y.v = hs.v - 30
?} else {
??y.v = hs.v + 30
?};
?z = h2r(y);
?ud("1", z);
?if ((hs.h >= 0) && (hs.h < 30)) {
??yx.h = y.h = hs.h + 20;
??yx.s = y.s = hs.s;
??y.v = hs.v;
??if (hs.v > 70) {
???yx.v = hs.v - 30
??} else {
???yx.v = hs.v + 30
??}
?}
?if ((hs.h >= 30) && (hs.h < 60)) {
??yx.h = y.h = hs.h + 150;
??y.s = rc(hs.s - 30, 100);
??y.v = rc(hs.v - 20, 100);
??yx.s = rc(hs.s - 70, 100);
??yx.v = rc(hs.v + 20, 100);
?}
?if ((hs.h >= 60) && (hs.h < 180)) {
??yx.h = y.h = hs.h - 40;
??y.s = yx.s = hs.s;
??y.v = hs.v;
??if (hs.v > 70) {
???yx.v = hs.v - 30
??} else {
???yx.v = hs.v + 30
??}
?}
?if ((hs.h >= 180) && (hs.h < 220)) {
??yx.h = hs.h - 170;
??y.h = hs.h - 160;
??yx.s = y.s = hs.s;
??y.v = hs.v;
??if (hs.v > 70) {
???yx.v = hs.v - 30
??} else {
???yx.v = hs.v + 30
??}
?}
?if ((hs.h >= 220) && (hs.h < 300)) {
??yx.h = y.h = hs.h;
??yx.s = y.s = rc(hs.s - 60, 100);
??y.v = hs.v;
??if (hs.v > 70) {
???yx.v = hs.v - 30
??} else {
???yx.v = hs.v + 30
??}
?}
?if (hs.h >= 300) {
??if (hs.s > 50) {
???y.s = yx.s = hs.s - 40
??} else {
???y.s = yx.s = hs.s + 40
??}
??yx.h = y.h = (hs.h + 20) % 360;
??y.v = hs.v;
??if (hs.v > 70) {
???yx.v = hs.v - 30
??} else {
???yx.v = hs.v + 30
??}
?}
?z = h2r(y);
?ud("2", z);
?z = h2r(yx);
?ud("3", z);
?y.h = 0;
?y.s = 0;
?y.v = 100 - hs.v;
?z = h2r(y);
?ud("4", z);
?y.h = 0;
?y.s = 0;
?y.v = hs.v;
?z = h2r(y);
?ud("5", z);
}
??</SCRIPT>
?</HEAD>
?<BODY onmouseup="mover=moveg=moveb=0;">
??<DIV style="WIDTH: 400px">
???<SPAN class="t2">颜色搭配器</SPAN>
???<BR>
???<BR>
???该工具在你选择一个主色的基础上能自动配出另外适合的5种颜色
???（你也可以点击后边的5个色块，将该色设为主色，得到另一个配搭方案）！
???接下来你只需复制对应颜色的色标（如：#E66000）
???到你需要设置的地方就ok拉,做整体UI搭配的时候就有了理论基础拉，哈哈！
???<BR>
???<BR>
???<B>我喜欢的主色调:<BR>
????<BR>
????<BR>
????<BR>
????<BR>
????<BR>
????<BR>
????<BR>
????<BR>下面是6种搭配的颜色:
??</DIV>
??<SCRIPT>pl(170,"red","r");pl(200,"green","g");pl(230,"blue","b")</SCRIPT>
??<DIV class="s" id="sw"
???style="LEFT: 316px; WIDTH: 82px; POSITION: absolute; TOP: 170px; HEIGHT: 81px; BACKGROUND-COLOR: black"></DIV>
??<DIV style="LEFT: 20px; POSITION: absolute; TOP: 290px">
???<TABLE cellSpacing="10" cellPadding="0">
????<TBODY>
?????<TR>
??????<SCRIPT>ps(0);ps(1);ps(2);ps(3);ps(4);ps(5);</SCRIPT>
?????</TR>
?????<TR>
??????<SCRIPT>ph(0);ph(1);ph(2);ph(3);ph(4);ph(5);</SCRIPT>
?????</TR>
????</TBODY>
???</TABLE>
??</DIV>
?</BODY>
</HTML>