网页调色板汇总
网页调色板汇总
1. R，G，B三色调和
<html><head><title>ColorMatch 5K</title><style>.s{border:inset 1;width:50}.s2{border:outset 1;width:19;height:19;background-color:#E6E6E6;position:absolute;left:1;top:1}.t{font:11px tahoma;color:#555555}.t2{font:bold 36px verdana}</style></head><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="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,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><body onMouseUp="mover=moveg=moveb=0;" bgcolor=#E6E6E6 leftmargin=30 topmargin=30 class=t><div style="width:400"><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 class=s id=sw style="position:absolute;left:316;top:170;height:81;width:82;background-color:black;"></div><div style="position:absolute;left:20;top:290;"><table cellspacing=10 cellpadding=0><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></table></div>
2. 随机色系系列
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Steven G. Chipman" />
<meta name="description" content="A color swatch generator based on the tutorial located here: http://www.stuffandnonsense.co.uk/archives/creating_colour_palettes.html" />
<meta name="copyright" content="(c) 2004 S.G. Chipman" />
<meta name="keywords" content="color, hex, rgb, palette, javascript, dhtml, slayeroffice" />
<title>slayeroffice | tools | color palette creator v1.6</title>
<link rel="Stylesheet" type="text/css" href="/js/color_palette.css" />
<script language="javascript" type="text/javascript" src="/js/color_palette.js"></script>
</head>
<body>
<div class="textContainer">
<span id="hex0"></span>
<span id="hex1"></span>
<span id="hex2"></span>
<span id="hex3"></span>
<span id="hex4"></span>
</div>
<div id="mContainer">
<div id="lightLayer"></div>
<div id="darkLayer"></div>
</div>
<div class="textContainer">
<span id="hex5"></span>
<span id="hex6"></span>
<span id="hex7"></span>
<span id="hex8"></span>
<span id="hex9"></span>
</div>
<div id="controls">
<table class="controlsTable">
<tr>
<td>Blend top row with:</td>
<td><input title="The color the top row is blended with." type="text" class="txt" id="newLightBlend" value="FFFFFF" /><input type="button" class="btn" value="change" onclick="changeBlend(0);" /></td>
</tr>
<tr>
<td>Blend bottom row with:</td>
<td><input title="The color the bottom row is blended with." type="text" class="txt" id="newDarkBlend" value="000000" /><input type="button" class="btn" value="change" onclick="changeBlend(1);" /></td>
</tr>
<tr>
<td>Base Color:</td>
<td><input class="txt" title="The color all other colors will derive from." id="newBaseColor" type="text" value="A74661" /><input class="btn" type="button" onclick="createSwatches();" value="ok" /></td>
</tr>
<tr>
<td>Base History:</td>
<td><select title="A history of your base colors this session." id="bHistory" onchange="d.getElementById('newBaseColor').value=this.value;createSwatches();"></select><input type="button" onclick="clearBaseHistory();" value="clear history" class="btn" /></td>
</tr>
<tr>
<td><input title="Click this button for a randomly generated base color." class="btn" type="button" onclick="randomBaseColor();" value="random base" /></td>
<td><input class="btn" type="button" onclick="saveBase();" value="save base" /><input class="btn" type="button" onclick="viewSaved();" value="view saved" /></td>
</tr>
<tr>
<td><input class="btn" type="button" onclick="showVals('hex');" value="output hex" /></td>
<td><input class="btn" type="button" onclick="showVals('rgb');" value="output rgb" /></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="colorTable">
<tr><td id="c0"></td><td id="v0" width="225"></td></tr>
<tr><td id="c1"></td><td id="v1"></td></tr>
<tr><td id="c2"></td><td id="v2"></td></tr>
<tr><td id="c3"></td><td id="v3"></td></tr>
<tr><td id="c4"></td><td id="v4"></td></tr>
<tr><td id="c5"></td><td id="v5"></td></tr>
<tr><td id="c6"></td><td id="v6"></td></tr>
<tr><td id="c7"></td><td id="v7"></td></tr>
<tr><td id="c8"></td><td id="v8"></td></tr>
<tr><td id="c9"></td><td id="v9"></td></tr>
</table>
<textarea id="txt"></textarea>
</div>
</body>
</html>
3. FLASH
http://www.it365cn.com/bbs/upload/2004102911231360930.swf
4. 调用Windows自带的配色控件
<OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>
<script>
var tempColor = "0099cc";
function returnColor(){
var Hcolor = dlgHelper.ChooseColorDlg(tempColor).toString(16);
with(event.srcElement){
value = ((Hcolor.length<6)?"000000".substring(0,6-Hcolor.length):"") + Hcolor;
style.backgroundColor = ((Hcolor.length<6)?"000000".substring(0,6-Hcolor.length):"") + Hcolor;
}
tempColor = Hcolor
}
</script>
<input type="text" value="#0099CC" size="12" onclick="returnColor()" style="background-color: #0099CC">
5. 鼠标取色
<table align=center>
<tr><td align=center>
<b>鼠标取色</b><hr noshade color=red size=1>
</td></tr>
<tr><td class=st9>
<b>使用方法：</b><br>
<ul>
<li>1、先在左边的色域内点击鼠标左键选择颜色
<li>2、然后在右边的色域内用左键选择亮度
<li>3、再将?傻难丈??胝程?粗频缴厦娴纳柚每蛑?
<hr noshade color=red size=1>
</ul>
</td></tr>
<tr><td>
<SCRIPT language=JavaScript>
var SelRGB = '';
var DrRGB = '';
var SelGRAY = '120';
var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
function ToHex(n)
{ var h, l;
n = Math.round(n);
l = n % 16;
h = Math.floor((n / 16)) % 16;
return (hexch[h] + hexch[l]);
}
function DoColor(c, l)
{ var r, g, b;
r = '0x' + c.substring(1, 3);
g = '0x' + c.substring(3, 5);
b = '0x' + c.substring(5, 7);
if(l > 120)
{
l = l - 120;
r = (r * (120 - l) + 255 * l) / 120;
g = (g * (120 - l) + 255 * l) / 120;
b = (b * (120 - l) + 255 * l) / 120;
}else
{
r = (r * l) / 120;
g = (g * l) / 120;
b = (b * l) / 120;
}
return '#' + ToHex(r) + ToHex(g) + ToHex(b);
}
function EndColor()
{ var i;
if(DrRGB != SelRGB)
{
DrRGB = SelRGB;
for(i = 0; i <= 30; i ++)
GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8);
}
SelColor.value = DoColor(RGB.innerText, GRAY.innerText);
ShowColor.bgColor = SelColor.value;
}
</SCRIPT>
<SCRIPT event=onclick for=ColorTable language=JavaScript>
SelRGB = event.srcElement.bgColor;
EndColor();
</SCRIPT>
<SCRIPT event=onmouseover for=ColorTable language=JavaScript>
RGB.innerText = event.srcElement.bgColor;
EndColor();
</SCRIPT>
<SCRIPT event=onmouseout for=ColorTable language=JavaScript>
RGB.innerText = SelRGB;
EndColor();
</SCRIPT>
<SCRIPT event=onclick for=GrayTable language=JavaScript>
SelGRAY = event.srcElement.title;
EndColor();
</SCRIPT>
<SCRIPT event=onmouseover for=GrayTable language=JavaScript>
GRAY.innerText = event.srcElement.title;
EndColor();
</SCRIPT>
<SCRIPT event=onmouseout for=GrayTable language=JavaScript>
GRAY.innerText = SelGRAY;
EndColor();
</SCRIPT>
<SCRIPT event=onclick for=Ok language=JavaScript>
window.returnValue = SelColor.value;
window.close();
</SCRIPT>
<DIV align=center>
<CENTER>
<TABLE border=0 cellPadding=0 cellSpacing=10>
<TBODY>
<TR>
<TD>
<TABLE border=0 cellPadding=0 cellSpacing=0 id=ColorTable
style="CURSOR: hand">
<SCRIPT language=JavaScript>
function wc(r, g, b, n)
{
r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;
g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;
b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;
document.write('<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=8></TD>');
}
var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);
for(i = 0; i < 16; i ++)
{
document.write('<TR>');
for(j = 0; j < 30; j ++)
{
n1 = j % 5;
n2 = Math.floor(j / 5) * 3;
n3 = n2 + 3;
wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)),
(cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),
(cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i);
}
document.writeln('</TR>');
}
</SCRIPT>
<TBODY></TBODY></TABLE></TD>
<TD>
<TABLE border=0 cellPadding=0 cellSpacing=0 id=GrayTable
style="CURSOR: hand">
<SCRIPT language=JavaScript>
for(i = 255; i >= 0; i -= 8.5)
document.write('<TR BGCOLOR=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><TD TITLE=' + Math.floor(i * 16 / 17) + ' height=4 width=20></TD></TR>');
</SCRIPT>
<TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></DIV>
<DIV align=center>
<CENTER>
<TABLE border=0 cellPadding=0 cellSpacing=10 class=st9>
<TBODY>
<TR>
<TD align=middle rowSpan=2>选中色彩
<TABLE border=1 cellPadding=0 cellSpacing=0 height=40 id=ShowColor
width=150>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD rowSpan=2>基色: <SPAN id=RGB></SPAN><BR>亮度: <SPAN
id=GRAY>120</SPAN><BR>代码: <INPUT id=SelColor size=7 class=form_t></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</DIV>
</td></tr></table>
6. 216色
<HTML><HEAD><TITLE>Typhoon Start JavaScript Fairyland</TITLE>
<STYLE type=text/css>#subtext {
BACKGROUND-COLOR: #cccccc; FONT-FAMILY: helvetica,arial; FONT-SIZE: 8pt; layer-background-color: #CCCCCC
}
#title {
FONT-FAMILY: helvetica,arial; FONT-SIZE: 13pt; FONT-WEIGHT: bold
}
#red {
BACKGROUND-IMAGE: url(redback.gif); CLIP: rect(0px 256px 10px 0px); HEIGHT: 10px; LEFT: 54px; POSITION: absolute; TOP: 100px; VISIBILITY: visible; WIDTH: 256px; Z-INDEX: 1; layer-background-image: url(redback.gif)
}
#green {
BACKGROUND-IMAGE: url(greenback.gif); CLIP: rect(0px 256px 10px 0px); HEIGHT: 10px; LEFT: 54px; POSITION: absolute; TOP: 120px; VISIBILITY: visible; WIDTH: 256px; Z-INDEX: 1; layer-background-image: url(greenback.gif)
}
#blue {
BACKGROUND-IMAGE: url(blueback.gif); CLIP: rect(0px 256px 10px 0px); HEIGHT: 10px; LEFT: 54px; POSITION: absolute; TOP: 140px; VISIBILITY: visible; WIDTH: 256px; Z-INDEX: 1; layer-background-image: url(blueback.gif)
}
#redSlider {
BACKGROUND-IMAGE: url(scroll-boxh.gif); CLIP: rect(0px 8px 14px 0px); HEIGHT: 14px; LEFT: 50px; POSITION: absolute; TOP: 98px; VISIBILITY: visible; WIDTH: 8px; Z-INDEX: 2; layer-background-image: url(scroll-boxh.gif)
}
#greenSlider {
BACKGROUND-IMAGE: url(scroll-boxh.gif); CLIP: rect(0px 8px 14px 0px); HEIGHT: 14px; LEFT: 50px; POSITION: absolute; TOP: 118px; VISIBILITY: visible; WIDTH: 8px; Z-INDEX: 2; layer-background-image: url(scroll-boxh.gif)
}
#blueSlider {
BACKGROUND-IMAGE: url(scroll-boxh.gif); CLIP: rect(0px 8px 14px 0px); HEIGHT: 14px; LEFT: 50px; POSITION: absolute; TOP: 138px; VISIBILITY: visible; WIDTH: 8px; Z-INDEX: 2; layer-background-image: url(scroll-boxh.gif)
}
#display {
BACKGROUND-COLOR: #000000; HEIGHT: 50px; LEFT: 320px; POSITION: absolute; TOP: 100px; VISIBILITY: visible; WIDTH: 50px; Z-INDEX: 1; layer-background-color: #000000
}
#hexValue {
HEIGHT: 20px; LEFT: 54px; POSITION: absolute; TOP: 160px; VISIBILITY: visible; WIDTH: 320px; Z-INDEX: 1
}
#titleBar {
BACKGROUND-COLOR: #dddddd; HEIGHT: 20px; LEFT: 54px; POSITION: absolute; TOP: 70px; WIDTH: 320px; Z-INDEX: 1; layer-background-color: #DDDDDD
}
#colorTable {
HEIGHT: 200px; LEFT: 380px; POSITION: absolute; TOP: 70px; VISIBILITY: visible; WIDTH: 320px; Z-INDEX: 1
}
</STYLE>
<SCRIPT language=JavaScript>
<!-- Begin
function init() {
ns4 = (document.layers)?true:false;
ie4 = (document.all)?true:false;
sliderMin = 50;
sliderMax = 306;
rValue=0;
gValue=0;
bValue=0;
r1 = '0';
r2 = '0';
g1 = '0';
g2 = '0';
b1 = '0';
b2 = '0';
Rgb = '0';
rGb = '0';
rgB = '0';
rActive = false;
gActive = false;
bActive = false;
document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
if (ns4) {
domRed = document.redSlider;
domRed.xpos = parseInt(domRed.left);
domRed.ypos = parseInt(domRed.top);
domRed.w = domRed.clip.width;
domRed.h = domRed.clip.height;
domGreen = document.greenSlider;
domGreen.xpos = parseInt(domGreen.left);
domGreen.ypos = parseInt(domGreen.top);
domGreen.w = domGreen.clip.width;
domGreen.h = domGreen.clip.height;
domBlue = document.blueSlider;
domBlue.xpos = parseInt(domBlue.left);
domBlue.ypos = parseInt(domBlue.top);
domBlue.w = domBlue.clip.width;
domBlue.h = domBlue.clip.height;
domDisplay = document.display;
domValue = document.hexValue.document.frmValue.valueDisp;
domredValue = document.hexValue.document.frmValue.RgbDisp;
domgreenValue = document.hexValue.document.frmValue.rGbDisp;
domblueValue = document.hexValue.document.frmValue.rgBDisp;
}
else {
domRed = redSlider.style;
domRed.xpos = redSlider.offsetLeft;
domRed.ypos = redSlider.offsetTop;
domRed.w = redSlider.clientWidth;
domRed.h = redSlider.clientHeight;
domGreen = greenSlider.style;
domGreen.xpos = greenSlider.offsetLeft;
domGreen.ypos = greenSlider.offsetTop;
domGreen.w = greenSlider.clientWidth;
domGreen.h = greenSlider.clientHeight;
domBlue = blueSlider.style;
domBlue.xpos = blueSlider.offsetLeft;
domBlue.ypos = blueSlider.offsetTop;
domBlue.w = blueSlider.clientWidth;
domBlue.h = blueSlider.clientHeight;
domDisplay = display;
domValue = frmValue.valueDisp;
domredValue = frmValue.RgbDisp;
domgreenValue = frmValue.rGbDisp;
domblueValue = frmValue.rgBDisp;
}
hexArray = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
}
function mouseDown(e) {
if ((ns4 && e.which!=1) || (ie4 && event.button!=1)) return true;
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft;
var y = (ns4)? e.pageY : event.y+document.body.scrollTop;
if (x > domRed.xpos && x < domRed.xpos+domRed.w && y > domRed.ypos && y < domRed.ypos+domRed.h){ rActive = true; dragObject = domRed; }
if (x > domGreen.xpos && x < domGreen.xpos+domGreen.w && y > domGreen.ypos && y < domGreen.ypos+domGreen.h){ gActive = true; dragObject = domGreen; }
if (x > domBlue.xpos && x < domBlue.xpos+domBlue.w && y > domBlue.ypos && y < domBlue.ypos+domBlue.h){ bActive = true; dragObject = domBlue; }
if (rActive==true || gActive==true || bActive==true){
if (x>=dragObject.xpos && x<=dragObject.xpos+dragObject.w) {
dragObject.dragOffsetX = x-dragObject.xpos
}
return false
}
else {
return true
}
}
function mouseMove(e) {
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft;
var y = (ns4)? e.pageY : event.y+document.body.scrollTop;
if (rActive) {
rMoveTo = x-dragObject.dragOffsetX;
if (rMoveTo > sliderMax) rMoveTo = 306;
if (rMoveTo < sliderMin) rMoveTo = 50;
domRed.xpos = rMoveTo;
domRed.left = domRed.xpos;
rValue = (domRed.xpos+4)-50;
calcValue(rMoveTo-50, 'red');
}
if (gActive) {
gMoveTo = x-dragObject.dragOffsetX;
if (gMoveTo > sliderMax) gMoveTo = sliderMax;
if (gMoveTo < sliderMin) gMoveTo = sliderMin;
domGreen.xpos = gMoveTo;
domGreen.left = domGreen.xpos;
gValue = (domGreen.xpos+4)-50;
calcValue(gMoveTo-50, 'green');
}
if (bActive) {
bMoveTo = x-dragObject.dragOffsetX;
if (bMoveTo > sliderMax) bMoveTo = sliderMax;
if (bMoveTo < sliderMin) bMoveTo = sliderMin;
domBlue.xpos = bMoveTo;
domBlue.left = domBlue.xpos;
bValue = (domBlue.xpos+4)-50;
calcValue(bMoveTo-50, 'blue');
}
return true
}
function mouseUp(e) {
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft
var y = (ns4)? e.pageY : event.y+document.body.scrollTop
rActive = false;
gActive = false;
bActive = false;
return true
}
function calcValue(base, color) {
base -= 1;
if (base < 16) { first = 0; }
else { first = parseInt(base/16); }
if (base < 0 ) { second = 0; base = 0; }
else { second = parseInt(base%16); }
c1=hexArray[first];
c2=hexArray[second];
if (color == 'red') { r1 = c1; r2 = c2; Rgb=base; }
else if (color == 'green') { g1 = c1; g2 = c2; rGb=base; }
else { b1 = c1; b2 = c2; rgB=base; }
domValue.value = eval('"'+r1+r2+g1+g2+b1+b2+'"');
domredValue.value = eval('"'+Rgb+'"');
domgreenValue.value = eval('"'+rGb+'"');
domblueValue.value = eval('"'+rgB+'"');
if (ns4) { domDisplay.bgColor = eval('"#'+r1+r2+g1+g2+b1+b2+'"'); }
else { domDisplay.style.backgroundColor = eval('"#'+r1+r2+g1+g2+b1+b2+'"'); }
return true;
}
function manualSet(value,color) {
if (value < 0) value=0;
if (value > 255) value=255;
++value;
calcValue(value,color);
if (color == 'red'){ domRed.xpos = value+sliderMin-4; domRed.left = domRed.xpos; }
else if (color == 'green'){ domGreen.xpos = value+sliderMin-4; domGreen.left = domGreen.xpos; }
else { domBlue.xpos = value+sliderMin-4; domBlue.left = domBlue.xpos; }
}
function convertHex(hexString) {
if(hexString == null) hexString = domValue.value;
inputHexArray = new Array(6);
for(i=0;i<=5;++i) {
inputHexArray[i] = hexString.charAt(i);
}
for(i=0;i<=5;++i) {
tempHexVal = inputHexArray[i];
for(j=0;j<=15;++j) {
if(tempHexVal == hexArray[j]) tempHexVal = j;
}
inputHexArray[i] = tempHexVal;
}
Rgb = (inputHexArray[0]*16)+inputHexArray[1]+1;
calcValue(Rgb,'red');
manualSet(Rgb,'red');
rGb = (inputHexArray[2]*16)+inputHexArray[3]+1;
calcValue(rGb,'green');
manualSet(rGb,'green');
rgB = (inputHexArray[4]*16)+inputHexArray[5]+1;
calcValue(rgB,'blue');
manualSet(rgB,'blue');
}
// End -->
</SCRIPT>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<META content="MSHTML 5.00.3315.2870" name=GENERATOR></HEAD>
<BODY aLink=#33ff33 bgColor=#ffffff link=#33ff33 onload=init() text=#999999
vLink=#33ff33>
<DIV id=red></DIV>
<DIV id=green></DIV>
<DIV id=blue></DIV>
<DIV id=redSlider></DIV>
<DIV id=greenSlider></DIV>
<DIV id=blueSlider></DIV>
<DIV id=colorTable>
<TABLE border=0 cellPadding=0 cellSpacing=1>
<TBODY>
<TR>
<TD align=middle colSpan=18 id=subtext>Standard 216 Color Palette</TD></TR>
<SCRIPT>
<!--
clr = new Array('00','33','66','99','CC','FF');
for(k=0;k<6;++k){
for(j=0;j<6;){
document.write('<tr>/n');
for(m=0;m<3;++m){
for(i=0;i<6;++i){
document.write('<td bgcolor=#'+clr[k]+clr[j+m]+clr[i]+'>');
document.write('<a href="javascript:void(null)" ');
document.write('onClick="convertHex(/''+clr[k]+clr[j+m]+clr[i]+'/')/;">');
document.write('<img src=blankgif width=10 height=10 border=0></a></td>/n');
}
}
j+=3;
document.write('</tr>/n');
}
}
//-->
</SCRIPT>
</TBODY></TABLE></DIV>
<DIV id=display><IMG border=0 height=50 src="相当不错的调色板.files/blank.gif"
width=50></DIV>
<DIV id=titleBar>
<TABLE border=0 cellPadding=2 cellSpacing=0 width=320>
<TBODY>
<TR>
<TD id=title>Houser's RGB2HEX DHTML App</TD></TR></TBODY></TABLE></DIV>
<DIV id=hexValue>
<FORM name=frmValue>
<TABLE bgColor=#eeeeee border=0 cellPadding=2 cellSpacing=0 width=320>
<TBODY>
<TR>
<TD align=middle>
<TABLE border=0 cellPadding=2 cellSpacing=0>
<TBODY>
<TR>
<TD id=subtext>Red</TD>
<TD id=subtext>Green</TD>
<TD id=subtext>Blue</TD></TR>
<TR>
<TD><INPUT maxLength=3 name=RgbDisp
onblur="manualSet(this.value,'red');" size=3 value=0></TD>
<TD><INPUT maxLength=3 name=rGbDisp
onblur="manualSet(this.value,'green');" size=3 value=0></TD>
<TD><INPUT maxLength=3 name=rgBDisp
onblur="manualSet(this.value,'blue');" size=3
value=0></TD></TR></TBODY></TABLE></TD>
<TD align=middle>
<TABLE border=0 cellPadding=2 cellSpacing=0>
<TBODY>
<TR>
<TD id=subtext>Hexdecimal</TD></TR>
<TR>
<TD><INPUT maxLength=6 name=valueDisp onblur=convertHex(); size=6
value=000000></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></FORM></DIV></BODY></HTML>
7. 颜色更丰富
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
body{background-color: buttonface; }
input{font-size:9pt;font-family: "verdana,tahoma,arial,sans-serif";}
button{height:24px;font-size:10pt;font-family: "verdana,tahoma,arial,sans-serif";}
</style>
</head>
<body onSelectStart="return false;" style="margin: 0px;padding: 0px;">
<script language="JavaScript">
document.title="颜色选择"+ document.title;
var iW = 30;//共有6种颜色，每种颜色的宽为iW。iW*6为色带的宽。
var iH = '152';//iH为色带的高。
var iT =20;
var iL = 0;
//var iT = (document.body.offsetHeight-iH)/2;
var H,S,V;
var sr,sg,sb;
var curColor="#000000";
</script>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<input type=text disabled=true size=9 id=ShowColor style="background-color:#000000;disabled:true;"><input type=text disabled=true size=15 id=SelColor value="#000000">
</td>
</tr>
</table>
<script language="Javascript">
function SetColor(){
SelColor.value=curColor.toUpperCase();
ShowColor.style.background=curColor;
}
function HSV(){
var pX = event.offsetX;
var pY = event.offsetY;
var HalfH = parseInt(iH/2);
H = parseInt(pX*360/(iW*6));
if(event.offsetY < HalfH){
S = pY/HalfH;
V = 1;
}else{
S = 1;
V = (iH-pY)/HalfH;
}
HSVtoRGB();
rgb=RGB2HTML();
//HSV.value = 'H:'+H+' S:'+parseInt(S*100)+'% V:'+parseInt(V*100)+'%';
//RGB.value = 'R:'+sr+' G:'+sg+' B:'+sb;
SelColor.value="#"+rgb.toUpperCase();
ShowColor.style.background= '#'+rgb;
}
function HSVtoRGB(){
var r,g,b;
var k = (H%60)/60;
var c1 = V*(1-S);
var c2 = V*(1-S*k);
var c3 = V*(1-S*(1-k));
switch(parseInt(H/60)){
case 0 : r=V,g=c3;b=c1; break;
case 1 : r=c2,g=V;b=c1; break;
case 2 : r=c1,g=V;b=c3; break;
case 3 : r=c1,g=c2;b=V; break;
case 4 : r=c3,g=c1;b=V; break;
case 5 : r=V,g=c1;b=c2; break;
}
sr = parseInt(r*255);
sg = parseInt(g*255);
sb = parseInt(b*255);
}
function RGB2HTML(){
var r=(sr>=16)?sr.toString(16):('0'+sr.toString(16));
var g=(sg>=16)?sg.toString(16):('0'+sg.toString(16));
var b=(sb>=16)?sb.toString(16):('0'+sb.toString(16));
return r+g+b;
}
function finsh(){
window.returnValue = SelColor.value;
window.close();
}
function window.onload(){
var iHtml = '';
var RainBow = [255,0,0, 255,255,0, 0,255,0, 0,255,255, 0,0,255, 255,0,255, 255,0,0];
for(var i=0;i<6;i++){
var R1 = RainBow[i*3];
var G1 = RainBow[i*3+1];
var B1 = RainBow[i*3+2];
var R2 = RainBow[(i+1)*3];
var G2 = RainBow[(i+1)*3+1];
var B2 = RainBow[(i+1)*3+2];
iHtml += "<span style='position:absolute;left:"+(i*iW+iL)+";top:"+iT+";width:"+iW+";height:"+iH+";background:rgb("+R1+","+G1+","+B1+");'></span><span style='position:absolute;left:"+(i*iW+iL)+";top:"+iT+";width:"+iW+";height:"+iH+";background:rgb("+R2+","+G2+","+B2+");filter:alpha(opacity=0,finishopacity=100,Style=1);'></span>"
}
iHtml += "<span style=position:absolute;left:"+iL+";top:"+iT+";width:"+iW*6+";height:"+iH/2+";background:rgb(255,255,255);filter:alpha(opacity=100,finishOpacity=0,style=1,starty=0,finishy=100,startx=0,finishx=0)></span><span style=position:absolute;left:"+iL+";top:"+(iT+iH/2)+";width:"+iW*6+";height:"+iH/2+";background:rgb(0,0,0);filter:alpha(opacity=0,finishOpacity=100,style=1,starty=0,finishy=100,startx=0,finishx=0)></span><span style='cursor:crosshair;position:absolute;left:"+iL+";top:"+iT+";width:"+iW*6+";height:"+iH+";' onmousemove=HSV() ondblclick=finsh() onclick='curColor=SelColor.value' onmouseout=SetColor()></span>"
document.body.innerHTML+=iHtml;
SetColor();
}
</script>
</body>
</html>
8. 两个文件一起保存，值得推荐
test1.html
<SCRIPT>
var dWin=null;
function doDialog()
{
dWin=showModelessDialog('color.html',window,'status:no;dialogWidth:260px;dialogHeight:200px');
}
</SCRIPT>
<form name=form1>
<input name="color1">
<button onclick="doDialog();" >open</button>
</form>
color.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2311">
<title>调色板</title>
<script>
var ColorHex=new Array('00','33','66','99','CC','FF')
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
var current=null
function intocolor()
{
var colorTable=''
for (i=0;i<2;i++)
{
for (j=0;j<6;j++)
{
colorTable=colorTable+'<tr height=12>'
colorTable=colorTable+'<td width=11 style="background-color:#000000">'
if (i==0){
colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'">'}
else{
colorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex[j]+'">'}
colorTable=colorTable+'<td width=11 style="background-color:#000000">'
for (k=0;k<3;k++)
{
for (l=0;l<6;l++)
{
colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">'
}
}
}
}
colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
+'<tr height=30><td colspan=21 bgcolor=#cccccc>'
+'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
+'<tr><td width="3"><td><input type="text" name="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
+'<td width="3"><td><input type="text" name="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td></tr></table></td></table>'
+'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" onmouseover="doOver()" onmouseout="doOut()" onclick="doclick()" style="cursor:hand;">'
+colorTable+'</table>';
colorpanel.innerHTML=colorTable
}
function doOver() {
if ((event.srcElement.tagName=="TD") && (current!=event.srcElement)) {
if (current!=null){current.style.backgroundColor = current._background}
event.srcElement._background = event.srcElement.style.backgroundColor
DisColor.style.backgroundColor = event.srcElement.style.backgroundColor
HexColor.value = event.srcElement.style.backgroundColor
event.srcElement.style.backgroundColor = "white"
current = event.srcElement
}
}
function doOut() {
if (current!=null) current.style.backgroundColor = current._background
}
function doclick(){
if (event.srcElement.tagName=="TD"){
dialogArguments.form1.color1.value=event.srcElement._background
window.close();
}
}
</script>
<SCRIPT>
function window.onunload()
{
dialogArguments.dWin=null;
}
</SCRIPT>
</head>
<body onload="intocolor()" topmargin=0 leftmargin=0 scroll=no>
<div id="colorpanel" style="position: absolute;">
</div>
</body>
</html>
9. 彩色板（From无忧视窗）
<style>td{font:menu;line-height:100%;cursor:hand}</style>
<script>
function getSelColor(){
sColor=event.srcElement.bgColor;
form.color.value=sColor;
document.body.bgColor=sColor;
alert(sColor);
}
</script>
<BODY >
<TABLE cellspacing="1" bgcolor="BLACK" width="456" style="font-size:8px" onclick="getSelColor()">
<TR>
<TD colspan="36" align="CENTER"><FONT face="Verdana,Arial" size="1" color="WHITE">The
Safety Palette</FONT></TD>
</TR>
<TR>
<TD bgcolor="zzzggdddddddddeeeee"> </TD>
<TD bgcolor="#000033"> </TD>
<TD bgcolor="#000066"> </TD>
<TD bgcolor="#000099"> </TD>
<TD bgcolor="#0000CC"> </TD>
<TD bgcolor="#0000FF"> </TD>
<TD bgcolor="#003300"> </TD>
<TD bgcolor="#003333"> </TD>
<TD bgcolor="#003366"> </TD>
<TD bgcolor="#003399"> </TD>
<TD bgcolor="#0033CC"> </TD>
<TD bgcolor="#0033FF"> </TD>
<TD bgcolor="#006600"> </TD>
<TD bgcolor="#006633"> </TD>
<TD bgcolor="#006666"> </TD>
<TD bgcolor="#006699"> </TD>
<TD bgcolor="#0066CC"> </TD>
<TD bgcolor="#0066FF"> </TD>
<TD bgcolor="#009900"> </TD>
<TD bgcolor="#009933"> </TD>
<TD bgcolor="#009966"> </TD>
<TD bgcolor="#009999"> </TD>
<TD bgcolor="#0099CC"> </TD>
<TD bgcolor="#0099FF"> </TD>
<TD bgcolor="#00CC00"> </TD>
<TD bgcolor="#00CC33"> </TD>
<TD bgcolor="#00CC66"> </TD>
<TD bgcolor="#00CC99"> </TD>
<TD bgcolor="#00CCCC"> </TD>
<TD bgcolor="#00CCFF"> </TD>
<TD bgcolor="#00FF00"> </TD>
<TD bgcolor="#00FF33"> </TD>
<TD bgcolor="#00FF66"> </TD>
<TD bgcolor="#00FF99"> </TD>
<TD bgcolor="#00FFCC"> </TD>
<TD bgcolor="#00FFFF"> </TD>
</TR>
<TR>
<TD bgcolor="#330000"> </TD>
<TD bgcolor="#330033"> </TD>
<TD bgcolor="#330066"> </TD>
<TD bgcolor="#330099"> </TD>
<TD bgcolor="#3300CC"> </TD>
<TD bgcolor="#3300FF"> </TD>
<TD bgcolor="#333300"> </TD>
<TD bgcolor="#333333"> </TD>
<TD bgcolor="#333366"> </TD>
<TD bgcolor="#333399"> </TD>
<TD bgcolor="#3333CC"> </TD>
<TD bgcolor="#3333FF"> </TD>
<TD bgcolor="#336600"> </TD>
<TD bgcolor="#336633"> </TD>
<TD bgcolor="#336666"> </TD>
<TD bgcolor="#336699"> </TD>
<TD bgcolor="#3366CC"> </TD>
<TD bgcolor="#3366FF"> </TD>
<TD bgcolor="#339900"> </TD>
<TD bgcolor="#339933"> </TD>
<TD bgcolor="#339966"> </TD>
<TD bgcolor="#339999"> </TD>
<TD bgcolor="#3399CC"> </TD>
<TD bgcolor="#3399FF"> </TD>
<TD bgcolor="#33CC00"> </TD>
<TD bgcolor="#33CC33"> </TD>
<TD bgcolor="#33CC66"> </TD>
<TD bgcolor="#33CC99"> </TD>
<TD bgcolor="#33CCCC"> </TD>
<TD bgcolor="#33CCFF"> </TD>
<TD bgcolor="#33FF00"> </TD>
<TD bgcolor="#33FF33"> </TD>
<TD bgcolor="#33FF66"> </TD>
<TD bgcolor="#33FF99"> </TD>
<TD bgcolor="#33FFCC"> </TD>
<TD bgcolor="#33FFFF"> </TD>
</TR>
<TR>
<TD bgcolor="#660000"> </TD>
<TD bgcolor="#660033"> </TD>
<TD bgcolor="#660066"> </TD>
<TD bgcolor="#660099"> </TD>
<TD bgcolor="#6600CC"> </TD>
<TD bgcolor="#6600FF"> </TD>
<TD bgcolor="#663300"> </TD>
<TD bgcolor="#663333"> </TD>
<TD bgcolor="#663366"> </TD>
<TD bgcolor="#663399"> </TD>
<TD bgcolor="#6633CC"> </TD>
<TD bgcolor="#6633FF"> </TD>
<TD bgcolor="#666600"> </TD>
<TD bgcolor="#666633"> </TD>
<TD bgcolor="#666666"> </TD>
<TD bgcolor="#666699"> </TD>
<TD bgcolor="#6666CC"> </TD>
<TD bgcolor="#6666FF"> </TD>
<TD bgcolor="#669900"> </TD>
<TD bgcolor="#669933"> </TD>
<TD bgcolor="#669966"> </TD>
<TD bgcolor="#669999"> </TD>
<TD bgcolor="#6699CC"> </TD>
<TD bgcolor="#6699FF"> </TD>
<TD bgcolor="#66CC00"> </TD>
<TD bgcolor="#66CC33"> </TD>
<TD bgcolor="#66CC66"> </TD>
<TD bgcolor="#66CC99"> </TD>
<TD bgcolor="#66CCCC"> </TD>
<TD bgcolor="#66CCFF"> </TD>
<TD bgcolor="#66FF00"> </TD>
<TD bgcolor="#66FF33"> </TD>
<TD bgcolor="#66FF66"> </TD>
<TD bgcolor="#66FF99"> </TD>
<TD bgcolor="#66FFCC"> </TD>
<TD bgcolor="#66FFFF"> </TD>
</TR>
<TR>
<TD bgcolor="#990000"> </TD>
<TD bgcolor="#990033"> </TD>
<TD bgcolor="#990066"> </TD>
<TD bgcolor="#990099"> </TD>
<TD bgcolor="#9900CC"> </TD>
<TD bgcolor="#9900FF"> </TD>
<TD bgcolor="#993300"> </TD>
<TD bgcolor="#993333"> </TD>
<TD bgcolor="#993366"> </TD>
<TD bgcolor="#993399"> </TD>
<TD bgcolor="#9933CC"> </TD>
<TD bgcolor="#9933FF"> </TD>
<TD bgcolor="#996600"> </TD>
<TD bgcolor="#996633"> </TD>
<TD bgcolor="#996666"> </TD>
<TD bgcolor="#996699"> </TD>
<TD bgcolor="#9966CC"> </TD>
<TD bgcolor="#9966FF"> </TD>
<TD bgcolor="#999900"> </TD>
<TD bgcolor="#999933"> </TD>
<TD bgcolor="#999966"> </TD>
<TD bgcolor="#999999"> </TD>
<TD bgcolor="#9999CC"> </TD>
<TD bgcolor="#9999FF"> </TD>
<TD bgcolor="#99CC00"> </TD>
<TD bgcolor="#99CC33"> </TD>
<TD bgcolor="#99CC66"> </TD>
<TD bgcolor="#99CC99"> </TD>
<TD bgcolor="#99CCCC"> </TD>
<TD bgcolor="#99CCFF"> </TD>
<TD bgcolor="#99FF00"> </TD>
<TD bgcolor="#99FF33"> </TD>
<TD bgcolor="#99FF66"> </TD>
<TD bgcolor="#99FF99"> </TD>
<TD bgcolor="#99FFCC"> </TD>
<TD bgcolor="#99FFFF"> </TD>
</TR>
<TR>
<TD bgcolor="#CC0000"> </TD>
<TD bgcolor="#CC0033"> </TD>
<TD bgcolor="#CC0066"> </TD>
<TD bgcolor="#CC0099"> </TD>
<TD bgcolor="#CC00CC"> </TD>
<TD bgcolor="#CC00FF"> </TD>
<TD bgcolor="#CC3300"> </TD>
<TD bgcolor="#CC3333"> </TD>
<TD bgcolor="#CC3366"> </TD>
<TD bgcolor="#CC3399"> </TD>
<TD bgcolor="#CC33CC"> </TD>
<TD bgcolor="#CC33FF"> </TD>
<TD bgcolor="#CC6600"> </TD>
<TD bgcolor="#CC6633"> </TD>
<TD bgcolor="#CC6666"> </TD>
<TD bgcolor="#CC6699"> </TD>
<TD bgcolor="#CC66CC"> </TD>
<TD bgcolor="#CC66FF"> </TD>
<TD bgcolor="#CC9900"> </TD>
<TD bgcolor="#CC9933"> </TD>
<TD bgcolor="#CC9966"> </TD>
<TD bgcolor="#CC9999"> </TD>
<TD bgcolor="#CC99CC"> </TD>
<TD bgcolor="#CC99FF"> </TD>
<TD bgcolor="#CCCC00"> </TD>
<TD bgcolor="#CCCC33"> </TD>
<TD bgcolor="#CCCC66"> </TD>
<TD bgcolor="#CCCC99"> </TD>
<TD bgcolor="#CCCCCC"> </TD>
<TD bgcolor="#CCCCFF"> </TD>
<TD bgcolor="#CCFF00"> </TD>
<TD bgcolor="#CCFF33"> </TD>
<TD bgcolor="#CCFF66"> </TD>
<TD bgcolor="#CCFF99"> </TD>
<TD bgcolor="#CCFFCC"> </TD>
<TD bgcolor="#CCFFFF"> </TD>
</TR>
<TR>
<TD bgcolor="#FF0000"> </TD>
<TD bgcolor="#FF0033"> </TD>
<TD bgcolor="#FF0066"> </TD>
<TD bgcolor="#FF0099"> </TD>
<TD bgcolor="#FF00CC"> </TD>
<TD bgcolor="#FF00FF"> </TD>
<TD bgcolor="#FF3300"> </TD>
<TD bgcolor="#FF3333"> </TD>
<TD bgcolor="#FF3366"> </TD>
<TD bgcolor="#FF3399"> </TD>
<TD bgcolor="#FF33CC"> </TD>
<TD bgcolor="#FF33FF"> </TD>
<TD bgcolor="#FF6600"> </TD>
<TD bgcolor="#FF6633"> </TD>
<TD bgcolor="#FF6666"> </TD>
<TD bgcolor="#FF6699"> </TD>
<TD bgcolor="#FF66CC"> </TD>
<TD bgcolor="#FF66FF"> </TD>
<TD bgcolor="#FF9900"> </TD>
<TD bgcolor="#FF9933"> </TD>
<TD bgcolor="#FF9966"> </TD>
<TD bgcolor="#FF9999"> </TD>
<TD bgcolor="#FF99CC"> </TD>
<TD bgcolor="#FF99FF"> </TD>
<TD bgcolor="#FFCC00"> </TD>
<TD bgcolor="#FFCC33"> </TD>
<TD bgcolor="#FFCC66"> </TD>
<TD bgcolor="#FFCC99"> </TD>
<TD bgcolor="#FFCCCC"> </TD>
<TD bgcolor="#FFCCFF"> </TD>
<TD bgcolor="#FFFF00"> </TD>
<TD bgcolor="#FFFF33"> </TD>
<TD bgcolor="#FFFF66"> </TD>
<TD bgcolor="#FFFF99"> </TD>
<TD bgcolor="#FFFFCC"> </TD>
<TD bgcolor="#FFFFFF"> </TD>
</TR>
</TABLE>
<TABLE cellspacing="1" bgcolor="BLACK" width="456" style="font-size:8px" onclick="getSelColor()">
<TR>
<TD colspan="4" align="CENTER"><FONT face="Verdana,Arial" size="1" color="WHITE">The
Safety Palette</FONT></TD>
</TR>
<tr>
<td align="center" bgcolor="activeborder">activeborder</td>
<td align="center" bgcolor="activecaption">activecaption</td>
<td align="center" bgcolor="appworkspace">appworkspace</td>
<td align="center" bgcolor="background">background</td>
</tr>
<tr>
<td align="center" bgcolor="buttonface">buttonface</td>
<td align="center" bgcolor="buttonhighlight">buttonhighlight</td>
<td align="center" bgcolor="buttonshadow">buttonshadow</td>
<td align="center" bgcolor="buttontext">buttontext</td>
</tr>
<tr>
<td align="center" bgcolor="captiontext">captiontext</td>
<td align="center" bgcolor="graytext">graytext</td>
<td align="center" bgcolor="highlight">highlight</td>
<td align="center" bgcolor="highlighttext">highlighttext</td>
</tr>
<tr>
<td align="center" bgcolor="inactiveborder">inactiveborder</td>
<td align="center" bgcolor="inactivecaption">inactivecaption</td>
<td align="center" bgcolor="inactivecaptiontext">inactivecaptiontext</td>
<td align="center" bgcolor="infobackground">infobackground</td>
</tr>
<tr>
<td align="center" bgcolor="infotext">infotext</td>
<td align="center" bgcolor="menu">menu</td>
<td align="center" bgcolor="menutext">menutext</td>
<td align="center" bgcolor="scrollbar">scrollbar</td>
</tr>
<tr>
<td align="center" bgcolor="threeddarkshadow">threeddarkshadow</td>
<td align="center" bgcolor="buttonface">threedface</td>
<td align="center" bgcolor="buttonhighlight">threedhighlight</td>
<td align="center" bgcolor="threedlightshadow">threedlightshadow</td>
</tr>
<tr>
<td align="center" bgcolor="buttonshadow">threedshadow</td>
<td align="center" bgcolor="window">window</td>
<td align="center" bgcolor="windowframe">windowframe</td>
<td align="center" bgcolor="windowtext">windowtext</td>
</tr>
<tr>
<td align="center" bgcolor="aliceblue">aliceblue<br>(#F0F8FF)</td>
<td align="center" bgcolor="antiquewhite">antiquewhite<br>(#FAEBD7)</td>
<td align="center" bgcolor="aqua">aqua<br>(#00FFFF)</td>
<td align="center" bgcolor="aquamarine">aquamarine<br>(#7FFFD4)</td>
</tr>
<tr>
<td align="center" bgcolor="azure">azure<br>(#F0FFFF)</td>
<td align="center" bgcolor="beige">beige<br>(#F5F5DC)</td>
<td align="center" bgcolor="bisque">bisque<br>(#FFE4C4)</td>
<td align="center" bgcolor="black">black<br>(#000000)</td>
</tr>
<tr>
<td align="center" bgcolor="blanchedalmond">blanchedalmond<br>(#FFEBCD)</td>
<td align="center" bgcolor="#0000ff">blue<br>(#0000FF)</td>
<td align="center" bgcolor="#8a2be2">blueviolet<br>(#8A2BE2)</td>
<td align="center" bgcolor="brown">brown<br>(#A52A2A)</td>
</tr>
<tr>
<td align="center" bgcolor="burlywood">burlywood<br>(#DEB887)</td>
<td align="center" bgcolor="cadetblue">cadetblue<br>(#5F9EA0)</td>
<td align="center" bgcolor="chartreuse">chartreuse<br>(#7FFF00)</td>
<td align="center" bgcolor="chocolate">chocolate<br>(#D2691E)</td>
</tr>
<tr>
<td align="center" bgcolor="coral">coral<br>(#FF7F50)</td>
<td align="center" bgcolor="#6495ed">cornflowerblue<br>(#6495ED)</td>
<td align="center" bgcolor="cornsilk">cornsilk<br>(#FFF8DC)</td>
<td align="center" bgcolor="crimson">crimson<br>(#DC143C)</td>
</tr>
<tr>
<td align="center" bgcolor="cyan">cyan<br>(#00FFFF)</td>
<td align="center" bgcolor="darkblue">darkblue<br>(#00008B)</td>
<td align="center" bgcolor="darkcyan">darkcyan