ТвойWeb :: Полезная программа для подбора цветовой гаммы сайта

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>ColorMatch 5K</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<STYLE>.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
}
.t {
FONT: 11px tahoma; COLOR: #555555
}
.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+")";
document.getElementById('dsp').innerHTML = '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="Click to promote to primary color"></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,finish x=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>

<BODY onmouseup=mover=moveg=moveb=0; class=t bgColor=#e6e6e6 leftMargin=30
topMargin=30>
<DIV style="WIDTH: 400px"><SPAN class=t2>ColorMatch 5K</SPAN><BR><BR>This
utility will help you select a matching 6-color palette for your
website.<BR>Define a single color that you like. Matching colors will be
calculated.<BR>Click a color in the palette to promote it to the primary
color.<BR><BR><B><BR>I like this
color:<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>6-color matching palette:</DIV>
<script>pl(170,"red","r");pl(200,"green","g");pl(230,"blue","b")</SCRIPT>
<div id=dsp>RGB: 0,0,0</div>
<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: 310px">
<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></B></BODY></HTML>