网页调色板大汇集

来源:互联网 发布:上交所数据接口费用 编辑:程序博客网 时间:2024/05/01 18:31

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">&nbsp;</TD>
      <TD bgcolor="#000033">&nbsp;</TD>
      <TD bgcolor="#000066">&nbsp;</TD>
      <TD bgcolor="#000099">&nbsp;</TD>
      <TD bgcolor="#0000CC">&nbsp;</TD>
      <TD bgcolor="#0000FF">&nbsp;</TD>
      <TD bgcolor="#003300">&nbsp;</TD>
      <TD bgcolor="#003333">&nbsp;</TD>
      <TD bgcolor="#003366">&nbsp;</TD>
      <TD bgcolor="#003399">&nbsp;</TD>
      <TD bgcolor="#0033CC">&nbsp;</TD>
      <TD bgcolor="#0033FF">&nbsp;</TD>
      <TD bgcolor="#006600">&nbsp;</TD>
      <TD bgcolor="#006633">&nbsp;</TD>
      <TD bgcolor="#006666">&nbsp;</TD>
      <TD bgcolor="#006699">&nbsp;</TD>
      <TD bgcolor="#0066CC">&nbsp;</TD>
      <TD bgcolor="#0066FF">&nbsp;</TD>
      <TD bgcolor="#009900">&nbsp;</TD>
      <TD bgcolor="#009933">&nbsp;</TD>
      <TD bgcolor="#009966">&nbsp;</TD>
      <TD bgcolor="#009999">&nbsp;</TD>
      <TD bgcolor="#0099CC">&nbsp;</TD>
      <TD bgcolor="#0099FF">&nbsp;</TD>
      <TD bgcolor="#00CC00">&nbsp;</TD>
      <TD bgcolor="#00CC33">&nbsp;</TD>
      <TD bgcolor="#00CC66">&nbsp;</TD>
      <TD bgcolor="#00CC99">&nbsp;</TD>
      <TD bgcolor="#00CCCC">&nbsp;</TD>
      <TD bgcolor="#00CCFF">&nbsp;</TD>
      <TD bgcolor="#00FF00">&nbsp;</TD>
      <TD bgcolor="#00FF33">&nbsp;</TD>
      <TD bgcolor="#00FF66">&nbsp;</TD>
      <TD bgcolor="#00FF99">&nbsp;</TD>
      <TD bgcolor="#00FFCC">&nbsp;</TD>
      <TD bgcolor="#00FFFF">&nbsp;</TD>
    </TR>
    <TR>
      <TD bgcolor="#330000">&nbsp;</TD>
      <TD bgcolor="#330033">&nbsp;</TD>
      <TD bgcolor="#330066">&nbsp;</TD>
      <TD bgcolor="#330099">&nbsp;</TD>
      <TD bgcolor="#3300CC">&nbsp;</TD>
      <TD bgcolor="#3300FF">&nbsp;</TD>
      <TD bgcolor="#333300">&nbsp;</TD>
      <TD bgcolor="#333333">&nbsp;</TD>
      <TD bgcolor="#333366">&nbsp;</TD>
      <TD bgcolor="#333399">&nbsp;</TD>
      <TD bgcolor="#3333CC">&nbsp;</TD>
      <TD bgcolor="#3333FF">&nbsp;</TD>
      <TD bgcolor="#336600">&nbsp;</TD>
      <TD bgcolor="#336633">&nbsp;</TD>
      <TD bgcolor="#336666">&nbsp;</TD>
      <TD bgcolor="#336699">&nbsp;</TD>
      <TD bgcolor="#3366CC">&nbsp;</TD>
      <TD bgcolor="#3366FF">&nbsp;</TD>
      <TD bgcolor="#339900">&nbsp;</TD>
      <TD bgcolor="#339933">&nbsp;</TD>
      <TD bgcolor="#339966">&nbsp;</TD>
      <TD bgcolor="#339999">&nbsp;</TD>
      <TD bgcolor="#3399CC">&nbsp;</TD>
      <TD bgcolor="#3399FF">&nbsp;</TD>
      <TD bgcolor="#33CC00">&nbsp;</TD>
      <TD bgcolor="#33CC33">&nbsp;</TD>
      <TD bgcolor="#33CC66">&nbsp;</TD>
      <TD bgcolor="#33CC99">&nbsp;</TD>
      <TD bgcolor="#33CCCC">&nbsp;</TD>
      <TD bgcolor="#33CCFF">&nbsp;</TD>
      <TD bgcolor="#33FF00">&nbsp;</TD>
      <TD bgcolor="#33FF33">&nbsp;</TD>
      <TD bgcolor="#33FF66">&nbsp;</TD>
      <TD bgcolor="#33FF99">&nbsp;</TD>
      <TD bgcolor="#33FFCC">&nbsp;</TD>
      <TD bgcolor="#33FFFF">&nbsp;</TD>
    </TR>
    <TR>
      <TD bgcolor="#660000">&nbsp;</TD>
      <TD bgcolor="#660033">&nbsp;</TD>
      <TD bgcolor="#660066">&nbsp;</TD>
      <TD bgcolor="#660099">&nbsp;</TD>
      <TD bgcolor="#6600CC">&nbsp;</TD>
      <TD bgcolor="#6600FF">&nbsp;</TD>
      <TD bgcolor="#663300">&nbsp;</TD>
      <TD bgcolor="#663333">&nbsp;</TD>
      <TD bgcolor="#663366">&nbsp;</TD>
      <TD bgcolor="#663399">&nbsp;</TD>
      <TD bgcolor="#6633CC">&nbsp;</TD>
      <TD bgcolor="#6633FF">&nbsp;</TD>
      <TD bgcolor="#666600">&nbsp;</TD>
      <TD bgcolor="#666633">&nbsp;</TD>
      <TD bgcolor="#666666">&nbsp;</TD>
      <TD bgcolor="#666699">&nbsp;</TD>
      <TD bgcolor="#6666CC">&nbsp;</TD>
      <TD bgcolor="#6666FF">&nbsp;</TD>
      <TD bgcolor="#669900">&nbsp;</TD>
      <TD bgcolor="#669933">&nbsp;</TD>
      <TD bgcolor="#669966">&nbsp;</TD>
      <TD bgcolor="#669999">&nbsp;</TD>
      <TD bgcolor="#6699CC">&nbsp;</TD>
      <TD bgcolor="#6699FF">&nbsp;</TD>
      <TD bgcolor="#66CC00">&nbsp;</TD>
      <TD bgcolor="#66CC33">&nbsp;</TD>
      <TD bgcolor="#66CC66">&nbsp;</TD>
      <TD bgcolor="#66CC99">&nbsp;</TD>
      <TD bgcolor="#66CCCC">&nbsp;</TD>
      <TD bgcolor="#66CCFF">&nbsp;</TD>
      <TD bgcolor="#66FF00">&nbsp;</TD>
      <TD bgcolor="#66FF33">&nbsp;</TD>
      <TD bgcolor="#66FF66">&nbsp;</TD>
      <TD bgcolor="#66FF99">&nbsp;</TD>
      <TD bgcolor="#66FFCC">&nbsp;</TD>
      <TD bgcolor="#66FFFF">&nbsp;</TD>
    </TR>
    <TR>
      <TD bgcolor="#990000">&nbsp;</TD>
      <TD bgcolor="#990033">&nbsp;</TD>
      <TD bgcolor="#990066">&nbsp;</TD>
      <TD bgcolor="#990099">&nbsp;</TD>
      <TD bgcolor="#9900CC">&nbsp;</TD>
      <TD bgcolor="#9900FF">&nbsp;</TD>
      <TD bgcolor="#993300">&nbsp;</TD>
      <TD bgcolor="#993333">&nbsp;</TD>
      <TD bgcolor="#993366">&nbsp;</TD>
      <TD bgcolor="#993399">&nbsp;</TD>
      <TD bgcolor="#9933CC">&nbsp;</TD>
      <TD bgcolor="#9933FF">&nbsp;</TD>
      <TD bgcolor="#996600">&nbsp;</TD>
      <TD bgcolor="#996633">&nbsp;</TD>
      <TD bgcolor="#996666">&nbsp;</TD>
      <TD bgcolor="#996699">&nbsp;</TD>
      <TD bgcolor="#9966CC">&nbsp;</TD>
      <TD bgcolor="#9966FF">&nbsp;</TD>
      <TD bgcolor="#999900">&nbsp;</TD>
      <TD bgcolor="#999933">&nbsp;</TD>
      <TD bgcolor="#999966">&nbsp;</TD>
      <TD bgcolor="#999999">&nbsp;</TD>
      <TD bgcolor="#9999CC">&nbsp;</TD>
      <TD bgcolor="#9999FF">&nbsp;</TD>
      <TD bgcolor="#99CC00">&nbsp;</TD>
      <TD bgcolor="#99CC33">&nbsp;</TD>
      <TD bgcolor="#99CC66">&nbsp;</TD>
      <TD bgcolor="#99CC99">&nbsp;</TD>
      <TD bgcolor="#99CCCC">&nbsp;</TD>
      <TD bgcolor="#99CCFF">&nbsp;</TD>
      <TD bgcolor="#99FF00">&nbsp;</TD>
      <TD bgcolor="#99FF33">&nbsp;</TD>
      <TD bgcolor="#99FF66">&nbsp;</TD>
      <TD bgcolor="#99FF99">&nbsp;</TD>
      <TD bgcolor="#99FFCC">&nbsp;</TD>
      <TD bgcolor="#99FFFF">&nbsp;</TD>
    </TR>
    <TR>
      <TD bgcolor="#CC0000">&nbsp;</TD>
      <TD bgcolor="#CC0033">&nbsp;</TD>
      <TD bgcolor="#CC0066">&nbsp;</TD>
      <TD bgcolor="#CC0099">&nbsp;</TD>
      <TD bgcolor="#CC00CC">&nbsp;</TD>
      <TD bgcolor="#CC00FF">&nbsp;</TD>
      <TD bgcolor="#CC3300">&nbsp;</TD>
      <TD bgcolor="#CC3333">&nbsp;</TD>
      <TD bgcolor="#CC3366">&nbsp;</TD>
      <TD bgcolor="#CC3399">&nbsp;</TD>
      <TD bgcolor="#CC33CC">&nbsp;</TD>
      <TD bgcolor="#CC33FF">&nbsp;</TD>
      <TD bgcolor="#CC6600">&nbsp;</TD>
      <TD bgcolor="#CC6633">&nbsp;</TD>
      <TD bgcolor="#CC6666">&nbsp;</TD>
      <TD bgcolor="#CC6699">&nbsp;</TD>
      <TD bgcolor="#CC66CC">&nbsp;</TD>
      <TD bgcolor="#CC66FF">&nbsp;</TD>
      <TD bgcolor="#CC9900">&nbsp;</TD>
      <TD bgcolor="#CC9933">&nbsp;</TD>
      <TD bgcolor="#CC9966">&nbsp;</TD>
      <TD bgcolor="#CC9999">&nbsp;</TD>
      <TD bgcolor="#CC99CC">&nbsp;</TD>
      <TD bgcolor="#CC99FF">&nbsp;</TD>
      <TD bgcolor="#CCCC00">&nbsp;</TD>
      <TD bgcolor="#CCCC33">&nbsp;</TD>
      <TD bgcolor="#CCCC66">&nbsp;</TD>
      <TD bgcolor="#CCCC99">&nbsp;</TD>
      <TD bgcolor="#CCCCCC">&nbsp;</TD>
      <TD bgcolor="#CCCCFF">&nbsp;</TD>
      <TD bgcolor="#CCFF00">&nbsp;</TD>
      <TD bgcolor="#CCFF33">&nbsp;</TD>
      <TD bgcolor="#CCFF66">&nbsp;</TD>
      <TD bgcolor="#CCFF99">&nbsp;</TD>
      <TD bgcolor="#CCFFCC">&nbsp;</TD>
      <TD bgcolor="#CCFFFF">&nbsp;</TD>
    </TR>
    <TR>
      <TD bgcolor="#FF0000">&nbsp;</TD>
      <TD bgcolor="#FF0033">&nbsp;</TD>
      <TD bgcolor="#FF0066">&nbsp;</TD>
      <TD bgcolor="#FF0099">&nbsp;</TD>
      <TD bgcolor="#FF00CC">&nbsp;</TD>
      <TD bgcolor="#FF00FF">&nbsp;</TD>
      <TD bgcolor="#FF3300">&nbsp;</TD>
      <TD bgcolor="#FF3333">&nbsp;</TD>
      <TD bgcolor="#FF3366">&nbsp;</TD>
      <TD bgcolor="#FF3399">&nbsp;</TD>
      <TD bgcolor="#FF33CC">&nbsp;</TD>
      <TD bgcolor="#FF33FF">&nbsp;</TD>
      <TD bgcolor="#FF6600">&nbsp;</TD>
      <TD bgcolor="#FF6633">&nbsp;</TD>
      <TD bgcolor="#FF6666">&nbsp;</TD>
      <TD bgcolor="#FF6699">&nbsp;</TD>
      <TD bgcolor="#FF66CC">&nbsp;</TD>
      <TD bgcolor="#FF66FF">&nbsp;</TD>
      <TD bgcolor="#FF9900">&nbsp;</TD>
      <TD bgcolor="#FF9933">&nbsp;</TD>
      <TD bgcolor="#FF9966">&nbsp;</TD>
      <TD bgcolor="#FF9999">&nbsp;</TD>
      <TD bgcolor="#FF99CC">&nbsp;</TD>
      <TD bgcolor="#FF99FF">&nbsp;</TD>
      <TD bgcolor="#FFCC00">&nbsp;</TD>
      <TD bgcolor="#FFCC33">&nbsp;</TD>
      <TD bgcolor="#FFCC66">&nbsp;</TD>
      <TD bgcolor="#FFCC99">&nbsp;</TD>
      <TD bgcolor="#FFCCCC">&nbsp;</TD>
      <TD bgcolor="#FFCCFF">&nbsp;</TD>
      <TD bgcolor="#FFFF00">&nbsp;</TD>
      <TD bgcolor="#FFFF33">&nbsp;</TD>
      <TD bgcolor="#FFFF66">&nbsp;</TD>
      <TD bgcolor="#FFFF99">&nbsp;</TD>
      <TD bgcolor="#FFFFCC">&nbsp;</TD>
      <TD bgcolor="#FFFFFF">&nbsp;</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<br>(#008B8B)</td>
<td align="center" bgcolor="darkgoldenrod">darkgoldenrod<br>(#B8860B)</td>
</tr>
<tr>
<td align="center" bgcolor="darkgray">darkgray<br>(#A9A9A9)</td>
<td align="center" bgcolor="darkgreen">darkgreen<br>(#006400)</td>
<td align="center" bgcolor="darkkhaki">darkkhaki<br>(#BDB76B)</td>
<td align="center" bgcolor="darkmagenta">darkmagenta<br>(#8B008B)</td>
</tr>
<tr>
<td align="center" bgcolor="darkolivegreen">darkolivegreen<br>(#556B2F)</td>
<td align="center" bgcolor="darkorange">darkorange<br>(#FF8C00)</td>
<td align="center" bgcolor="darkorchid">darkorchid<br>(#9932CC)</td>
<td align="center" bgcolor="darkred">darkred<br>(#8B0000)</td>
</tr>
<tr>
<td align="center" bgcolor="darksalmon">darksalmon<br>(#E9967A)</td>
<td align="center" bgcolor="darkseagreen">darkseagreen<br>(#8FBC8B)</td>
<td align="center" bgcolor="darkslateblue">darkslateblue<br>(#483D8B)</td>
<td align="center" bgcolor="darkslategray">darkslategray<br>(#2F4F4F)</td>
</tr>
<tr>
<td align="center" bgcolor="darkturquoise">darkturquoise<br>(#00CED1)</td>
<td align="center" bgcolor="darkviolet">darkviolet<br>(#9400D3)</td>
<td align="center" bgcolor="deeppink">deeppink<br>(#FF1493)</td>
<td align="center" bgcolor="deepskyblue">deepskyblue<br>(#00BFFF)</td>
</tr>
<tr>
<td align="center" bgcolor="dimgray">dimgray<br>(#696969)</td>
<td align="center" bgcolor="dodgerblue">dodgerblue<br>(#1E90FF)</td>
<td align="center" bgcolor="firebrick">firebrick<br>(#B22222)</td>
<td align="center" bgcolor="floralwhite">floralwhite<br>(#FFFAF0)</td>
</tr>
<tr>
<td align="center" bgcolor="forestgreen">forestgreen<br>(#228B22)</td>
<td align="center" bgcolor="#ff00ff">fuchsia<br>(#FF00FF)</td>
<td align="center" bgcolor="gainsboro">gainsboro<br>(#DCDCDC)</td>
<td align="center" bgcolor="ghostwhite">ghostwhite<br>(#F8F8FF)</td>
</tr>
<tr>
<td align="center" bgcolor="gold">gold<br>(#FFD700)</td>
<td align="center" bgcolor="goldenrod">goldenrod<br>(#DAA520)</td>
<td align="center" bgcolor="gray">gray<br>(#808080)</td>
<td align="center" bgcolor="green">green<br>(#008000)</td>
</tr>
<tr>
<td align="center" bgcolor="greenyellow">greenyellow<br>(#ADFF2F)</td>
<td align="center" bgcolor="honeydew">honeydew<br>(#F0FFF0)</td>
<td align="center" bgcolor="hotpink">hotpink<br>(#FF69B4)</td>
<td align="center" bgcolor="indianred">indianred<br>(#CD5C5C)</td>
</tr>
<tr>
<td align="center" bgcolor="indigo">indigo<br>(#4B0082)</td>
<td align="center" bgcolor="ivory">ivory<br>(#FFFFF0)</td>
<td align="center" bgcolor="khaki">khaki<br>(#F0E68C)</td>
<td align="center" bgcolor="lavender">lavender<br>(#E6E6FA)</td>
</tr>
<tr>
<td align="center" bgcolor="lavenderblush">lavenderblush<br>(#FFF0F5)</td>
<td align="center" bgcolor="lawngreen">lawngreen<br>(#7CFC00)</td>
<td align="center" bgcolor="lemonchiffon">lemonchiffon<br>(#FFFACD)</td>
<td align="center" bgcolor="lightblue">lightblue<br>(#ADD8E6)</td>
</tr>
<tr>
<td align="center" bgcolor="lightcoral">lightcoral<br>(#F08080)</td>
<td align="center" bgcolor="lightcyan">lightcyan<br>(#E0FFFF)</td>
<td align="center" bgcolor="lightgoldenrodyellow">lightgoldenrodyellow<br>(#FAFAD2)</td>
<td align="center" bgcolor="lightgreen">lightgreen<br>(#90EE90)</td>
</tr>
<tr>
<td align="center" bgcolor="lightgrey">lightgrey<br>(#D3D3D3)</td>
<td align="center" bgcolor="lightpink">lightpink<br>(#FFB6C1)</td>
<td align="center" bgcolor="lightsalmon">lightsalmon<br>(#FFA07A)</td>
<td align="center" bgcolor="lightseagreen">lightseagreen<br>(#20B2AA)</td>
</tr>
<tr>
<td align="center" bgcolor="lightskyblue">lightskyblue<br>(#87CEFA)</td>
<td align="center" bgcolor="lightslategray">lightslategray<br>(#778899)</td>
<td align="center" bgcolor="lightsteelblue">lightsteelblue<br>(#B0C4DE)</td>
<td align="center" bgcolor="lightyellow">lightyellow<br>(#FFFFE0)</td>
</tr>
<tr>
<td align="center" bgcolor="lime">lime<br>(#00FF00)</td>
<td align="center" bgcolor="limegreen">limegreen<br>(#32CD32)</td>
<td align="center" bgcolor="linen">linen<br>(#FAF0E6)</td>
<td align="center" bgcolor="magenta">magenta<br>(#FF00FF)</td>
</tr>
<tr>
<td align="center" bgcolor="maroon">maroon<br>(#800000)</td>
<td align="center" bgcolor="mediumaquamarine">mediumaquamarine<br>(#66CDAA)</td>
<td align="center" bgcolor="mediumblue">mediumblue<br>(#0000CD)</td>
<td align="center" bgcolor="mediumorchid">mediumorchid<br>(#BA55D3)</td>
</tr>
<tr>
<td align="center" bgcolor="mediumpurple">mediumpurple<br>(#9370DB)</td>
<td align="center" bgcolor="mediumseagreen">mediumseagreen<br>(#3CB371)</td>
<td align="center" bgcolor="mediumslateblue">mediumslateblue<br>(#7B68EE)</td>
<td align="center" bgcolor="mediumspringgreen">mediumspringgreen<br>(#00FA9A)</td>
</tr>
<tr>
<td align="center" bgcolor="mediumturquoise">mediumturquoise<br>(#48D1CC)</td>
<td align="center" bgcolor="mediumvioletred">mediumvioletred<br>(#C71585)</td>
<td align="center" bgcolor="midnightblue">midnightblue<br>(#191970)</td>
<td align="center" bgcolor="mintcream">mintcream<br>(#F5FFFA)</td>
</tr>
<tr>
<td align="center" bgcolor="mistyrose">mistyrose<br>(#FFE4E1)</td>
<td align="center" bgcolor="moccasin">moccasin<br>(#FFE4B5)</td>
<td align="center" bgcolor="navajowhite">navajowhite<br>(#FFDEAD)</td>
<td align="center" bgcolor="navy">navy<br>(#000080)</td>
</tr>
<tr>
<td align="center" bgcolor="oldlace">oldlace<br>(#FDF5E6)</td>
<td align="center" bgcolor="olive">olive<br>(#808000)</td>
<td align="center" bgcolor="olivedrab">olivedrab<br>(#6B8E23)</td>
<td align="center" bgcolor="orange">orange<br>(#FFA500)</td>
</tr>
<tr>
<td align="center" bgcolor="orangered">orangered<br>(#FF4500)</td>
<td align="center" bgcolor="orchid">orchid<br>(#DA70D6)</td>
<td align="center" bgcolor="palegoldenrod">palegoldenrod<br>(#EEE8AA)</td>
<td align="center" bgcolor="palegreen">palegreen<br>(#98FB98)</td>
</tr>
<tr>
<td align="center" bgcolor="paleturquoise">paleturquoise<br>(#AFEEEE)</td>
<td align="center" bgcolor="palevioletred">palevioletred<br>(#DB7093)</td>
<td align="center" bgcolor="papayawhip">papayawhip<br>(#FFEFD5)</td>
<td align="center" bgcolor="peachpuff">peachpuff<br>(#FFDAB9)</td>
</tr>
<tr>
<td align="center" bgcolor="peru">peru<br>(#CD853F)</td>
<td align="center" bgcolor="pink">pink<br>(#FFC0CB)</td>
<td align="center" bgcolor="plum">plum<br>(#DDA0DD)</td>
<td align="center" bgcolor="powderblue">powderblue<br>(#B0E0E6)</td>
</tr>
<tr>
<td align="center" bgcolor="purple">purple<br>(#800080)</td>
<td align="center" bgcolor="red">red<br>(#FF0000)</td>
<td align="center" bgcolor="rosybrown">rosybrown<br>(#BC8F8F)</td>
<td align="center" bgcolor="royalblue">royalblue<br>(#4169E1)</td>
</tr>
<tr>
<td align="center" bgcolor="saddlebrown">saddlebrown<br>(#8B4513)</td>
<td align="center" bgcolor="salmon">salmon<br>(#FA8072)</td>
<td align="center" bgcolor="sandybrown">sandybrown<br>(#F4A460)</td>
<td align="center" bgcolor="seagreen">seagreen<br>(#2E8B57)</td>
</tr>
<tr>
<td align="center" bgcolor="seashell">seashell<br>(#FFF5EE)</td>
<td align="center" bgcolor="sienna">sienna<br>(#A0522D)</td>
<td align="center" bgcolor="silver">silver<br>(#C0C0C0)</td>
<td align="center" bgcolor="skyblue">skyblue<br>(#87CEEB)</td>
</tr>
<tr>
<td align="center" bgcolor="slateblue">slateblue<br>(#6A5ACD)</td>
<td align="center" bgcolor="slategray">slategray<br>(#708090)</td>
<td align="center" bgcolor="snow">snow<br>(#FFFAFA)</td>
<td align="center" bgcolor="springgreen">springgreen<br>(#00FF7F)</td>
</tr>
<tr>
<td align="center" bgcolor="steelblue">steelblue<br>(#4682B4)</td>
<td align="center" bgcolor="tan">tan<br>(#D2B48C)</td>
<td align="center" bgcolor="teal">teal<br>(#008080)</td>
<td align="center" bgcolor="thistle">thistle<br>(#D8BFD8)</td>
</tr>
<tr>
<td align="center" bgcolor="tomato">tomato<br>(#FF6347)</td>
<td align="center" bgcolor="turquoise">turquoise<br>(#40E0D0)</td>
<td align="center" bgcolor="violet">violet<br>(#EE82EE)</td>
<td align="center" bgcolor="wheat">wheat<br>(#F5DEB3)</td>
</tr>
<tr>
<td align="center" bgcolor="white">white<br>(#FFFFFF)</td>
<td align="center" bgcolor="whitesmoke">whitesmoke<br>(#F5F5F5)</td>
<td align="center" bgcolor="yellow">yellow<br>(#FFFF00)</td>
<td align="center" bgcolor="yellowgreen">yellowgreen<br>(#9ACD32)</td>
</tr>
  </TABLE>
<form name=form><input type=text name=color style="font:menu" value="请选择颜色"></form>
<div style="position: absolute; bottom: 10; right: 0; width: 150; height: 18;cursor:hand;z-index:100000;font:menu;background:infobackground;border:1 solid #999999;padding:4px;">
 <A href="/data/" target=_blank><FONT color=red> DataCenter</FONT></A>  <A href="/game/" target=_blank><FONT color=green> 在线小游戏</FONT></A>
 <input type="button" name="Button" value="源代码" onClick= 'window.location = "view-source:" + window.location.href'><SCRIPT LANGUAGE="JavaScript" src="/log/sitelog.asp"></SCRIPT></div>
<!-- 海娃@haiwa@blueidea.com@无忧视窗@http://www.51windows.net -->


10.  Fellow牌调色板 Ver1.1

<head>
<title>Untitled Document-www.51windows.Net</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<!--- Designed By Fellow 12/2001 --->
<!--- Copyright(c)Fellow's Own World,2001 --->
<META name="author" content="fellow99@163.net">
<META NAME="DESCRIPTION" CONTENT="Fellow's Own World">
<style type="text/css">
<!--
body {font:menu}
td,selcet,input {  font:menu}
.memo {  border: 1px #dddddd solid}
.button {  border-color: #CCCCCC #666666 #666666 #CCCCCC; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.cursorcross {  cursor: crosshair}
.cursorhand {  cursor: hand}
-->
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><b><font color="#003366">Fellow牌调色板 Ver1.1</font></b><br>
<br>
</div>
<table border="0" cellspacing="1" cellpadding="3" width="350" align="center" bgcolor="#dddddd">
<tr bgcolor="#FFFFFF">
<td width="10%" align="center">
<select name="select1" onchange="selectchg(this.value)">
<option value="1" selected>红</option>
<option value="2">绿</option>
<option value="3">蓝</option>
<option value="4">灰</option>
</select>
</td>
<td width="90%" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<input type="text" name="text1" class="memo" size="10">
<input type="button" name="Button2" value="&gt;&gt;" class="button" onClick="choosecolor()">
</td>
<td align="right" width="3%">&nbsp;</td>
<td width="30%">
<table width="40" border="0" cellspacing="1" cellpadding="0" height="20"  class="cursorcross">
<tr>
<td id="customcolor" bgcolor="#FFFFFF"  onMouseOver="showcolor(this)">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="10%" align="center">
<table id="tableleft" border="0" cellspacing="1" cellpadding="0" class="cursorhand">
<script language="VBScript">
function hexit(which)
hexit=hex(which)
end function
</script>
<script language="JavaScript">
for(i=0;i<=15;++i)
{document.write('<tr><td align="center">'+ hexit(0+i*17) +'</td><td id="tdleft' + i +'" bgcolor="rgb('+ (0+i*17) + ',0,0)" width="15" height="15" onclick="changeright(this.num)" onmouseover="showcolor(this)"></td></tr>')
 document.all['tdleft' + i].num=i
}
</script>
</table>
</td>
<td align="center" width="90%">
<table id="tableleft" border="0" cellspacing="1" cellpadding="0" class="cursorcross">
<script language="JavaScript">
document.write('<tr><td></td>')
for(i=0;i<=15;++i)
{document.write('<td align="center">'+ hexit(0+i*17) +'</td>')}
document.write('</tr>')

for(i=0;i<=15;++i)
{document.write('<tr>')
 document.write('<td align="center">'+ hexit(0+i*17) +'</td>')
 for(j=0;j<=15;++j)
  {document.write('<td id="tdrightr' + i + 'c' + j +'" bgcolor="rgb(0,'+ (0+i*17) + ',' + (0+j*17) + ')" width="15" height="15" onmouseover="showcolor(this)" onclick="clickright(this)"></td>')}
 document.write('</tr>')
}

</script>
</table>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="20">·可选16*16*16种颜色。<br>
·单击左边的颜色会得到更多的颜色。<br>
·单击右边的颜色会固定选取的颜色。 <br>
·输入框可以自定义颜色。</td>
</tr>
</table>
<script language="JavaScript">
function selectchg(which)
{switch(which)
  {case '1' :leftR();break;
   case '2' :leftG();break;
   case '3' :leftB();break;
   case '4' :leftA();break;
  }
}
function leftR()
{for(i=0;i<=15;++i)
   {document.all['tdleft'+i].bgColor='rgb('+ (0+i*17) + ',0,0)'}
 rightR(0)
}
function leftG()
{for(i=0;i<=15;++i)
   {document.all['tdleft'+i].bgColor='rgb(0,'+ (0+i*17) + ',0)'}
 rightG(0)
}
function leftB()
{for(i=0;i<=15;++i)
   {document.all['tdleft'+i].bgColor='rgb(0,0,'+ (0+i*17) + ')'}
 rightB(0)
}
function leftA()
{for(i=0;i<=15;++i)
   {document.all['tdleft'+i].bgColor='rgb('+ (0+i*17) + ','+ (0+i*17) + ','+ (0+i*17) + ')'}
 rightA()
}
function rightR(which)
{for(i=0;i<=15;++i)
   {for(j=0;j<=15;++j)
     {document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+which*17) + ',' + (0+i*17) + ','+ (0+j*17) + ')'}
    }
}
function rightG(which)
{for(i=0;i<=15;++i)
   {for(j=0;j<=15;++j)
     {document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+i*17) + ',' + (0+which*17) +  ',' + (0+j*17) + ')'}
    }
}
function rightB(which)
{for(i=0;i<=15;++i)
   {for(j=0;j<=15;++j)
     {document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+i*17) + ','+ (0+j*17)+ ',' + (0+which*17) + ')'}
    }
}
function rightA()
{for(i=0;i<=15;++i)
   {for(j=0;j<=15;++j)
     {document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+i*16+j) + ','+ (0+i*16+j)+ ',' + (0+i*16+j) + ')'}
    }
}
var rightclicked=false
function clickright(which)
{if(rightclicked){rightclicked=false;showcolor(which)}else{rightclicked=true}
}
function changeright(which)
{switch(select1.value)
  {case '1' :rightR(which);break;
   case '2' :rightG(which);break;
   case '3' :rightB(which);break;
 }
}
function showcolor(which)
{if(rightclicked)return;
 text1.value=which.bgColor
 choosecolor()
}
function choosecolor()
{customcolor.bgColor=text1.value
}
</script>
</body>
</html>
<div style="position: absolute; bottom: 10; right: 0; width: 150; height: 18;cursor:hand;z-index:100000;font:menu;background:infobackground;border:1 solid #999999;padding:4px;">
 <A href="/data/" target=_blank><FONT color=red> DataCenter</FONT></A>  <A href="/game/" target=_blank><FONT color=green> 在线小游戏</FONT></A>
 <input type="button" name="Button" value="源代码" onClick= 'window.location = "view-source:" + window.location.href'><SCRIPT LANGUAGE="JavaScript" src="/log/sitelog.asp"></SCRIPT></div>
<!-- 海娃@haiwa@blueidea.com@无忧视窗@http://www.51windows.net -->

附录:配色方案

一、红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的色。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
1、在红色中加入少量的黄,会使其热力强盛,趋于躁动、不安。
2、在红色中加入少量的蓝,会使其热性减弱,趋于文雅、柔和。
3、在红色中加入少量的黑,会使其性格变的沉稳,趋于厚重、朴实。
4、在红中加入少量的白,会使其性格变的温柔,趋于含蓄、羞涩、娇嫩。

二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中,最为娇气的一种色。只要在纯黄色中混入少量的其它色,其色相感和色性格均会发生较大程度的变化。
1、在黄色中加入少量的蓝,会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失,趋于一种平和、潮润的感觉。
2、在黄色中加入少量的红,则具有明显的橙色感觉,其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
3、在黄色中加入少量的黑,其色感和色性变化最大,成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。
4、在黄色中加入少量的白,其色感变的柔和,其性格中的冷漠、高傲被淡化,趋于含蓄,易于接近。

三、蓝色的色感冷嘲热讽,性格朴实而内向,是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格,常为那些性格活跃、具有较强扩张力的色彩,提供一个深远、广埔、平静的空间,成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色,均不会对蓝色的性格构成较明显的影响力。
1、如果在橙色中黄的成份较多,其性格趋于甜美、亮丽、芳香。
2、在橙色中混入小量的白,可使橙色的知觉趋于焦躁、无力。

四、绿色是具有黄色和蓝色两种成份的色。在绿色中,将黄色的扩张感和蓝色的收缩感相中庸,将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。
1、在绿色中黄的成份较多时,其性格就趋于活泼、友善,具有幼稚性。
2、在绿色中加入少量的黑,其性格就趋于庄重、老练、成熟。
3、在绿色中加入少量的白,其性格就趋于洁净、清爽、鲜嫩。

五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
1、在紫色中红的成份较多时,其知觉具有压抑感、威胁感。
2、在紫色中加入少量的黑,其感觉就趋于沉闷、伤感、恐怖。
3、在紫色中加入白,可使紫色沉闷的性格消失,变得优雅、娇气,并充满女性的魅力。

六、白色的色感光明,性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色,都会影响其纯洁性,使其性格变的含蓄。
1、在白色中混入少量的红,就成为淡淡的粉色,鲜嫩而充满诱惑。
2、在白色中混入少量的黄,则成为一种乳黄色,给人一种香腻的印象。
3、在白色中混入少量的蓝,给人感觉清冷、洁净。
4、在白色中混入少量的橙,有一种干燥的气氛。
5、在白色中混入少量的绿,给人一种稚嫩、柔和的感觉
6、在白色中混入少量的紫,可诱导人联想到淡淡的芳香

原创粉丝点击