function ColorTable(instance){ this.Instance = new String(instance); this.Color = "#000000"; this.Callback = null; var flag = -1; var PreviewCellID = Global.GetUniqueID(); var RGBID = Global.GetUniqueID(); var LayerID = Global.GetUniqueID(); var Colors = "#000000,#000000,#000000,#000000,#003300,#006600,#009900,#00cc00,#00ff00,#330000,#333300,#336600,#339900,#33cc00,#33ff00,#660000,#663300,#666600,#669900,#66cc00,#66ff00,#000000,#333333,#000000,#000033,#003333,#006633,#009933,#00cc33,#00ff33,#330033,#333333,#336633,#339933,#33cc33,#33ff33,#660033,#663333,#666633,#669933,#66cc33,#66ff33,#000000,#666666,#000000,#000066,#003366,#006666,#009966,#00cc66,#00ff66,#330066,#333366,#336666,#339966,#33cc66,#33ff66,#660066,#663366,#666666,#669966,#66cc66,#66ff66,#000000,#999999,#000000,#000099,#003399,#006699,#009999,#00cc99,#00ff99,#330099,#333399,#336699,#339999,#33cc99,#33ff99,#660099,#663399,#666699,#669999,#66cc99,#66ff99,#000000,#cccccc,#000000,#0000cc,#0033cc,#0066cc,#0099cc,#00cccc,#00ffcc,#3300cc,#3333cc,#3366cc,#3399cc,#33cccc,#33ffcc,#6600cc,#6633cc,#6666cc,#6699cc,#66cccc,#66ffcc,#000000,#ffffff,#000000,#0000ff,#0033ff,#0066ff,#0099ff,#00ccff,#00ffff,#3300ff,#3333ff,#3366ff,#3399ff,#33ccff,#33ffff,#6600ff,#6633ff,#6666ff,#6699ff,#66ccff,#66ffff,#000000,#ff0000,#000000,#990000,#993300,#996600,#999900,#99cc00,#99ff00,#cc0000,#cc3300,#cc6600,#cc9900,#cccc00,#ccff00,#ff0000,#ff3300,#ff6600,#ff9900,#ffcc00,#ffff00,#000000,#00ff00,#000000,#990033,#993333,#996633,#999933,#99cc33,#99ff33,#cc0033,#cc3333,#cc6633,#cc9933,#cccc33,#ccff33,#ff0033,#ff3333,#ff6633,#ff9933,#ffcc33,#ffff33,#000000,#0000ff,#000000,#990066,#993366,#996666,#999966,#99cc66,#99ff66,#cc0066,#cc3366,#cc6666,#cc9966,#cccc66,#ccff66,#ff0066,#ff3366,#ff6666,#ff9966,#ffcc66,#ffff66,#000000,#ffff00,#000000,#990099,#993399,#996699,#999999,#99cc99,#99ff99,#cc0099,#cc3399,#cc6699,#cc9999,#cccc99,#ccff99,#ff0099,#ff3399,#ff6699,#ff9999,#ffcc99,#ffff99,#000000,#00ffff,#000000,#9900cc,#9933cc,#9966cc,#9999cc,#99cccc,#99ffcc,#cc00cc,#cc33cc,#cc66cc,#cc99cc,#cccccc,#ccffcc,#ff00cc,#ff33cc,#ff66cc,#ff99cc,#ffcccc,#ffffcc,#000000,#ff00ff,#000000,#9900ff,#9933ff,#9966ff,#9999ff,#99ccff,#99ffff,#cc00ff,#cc33ff,#cc66ff,#cc99ff,#ccccff,#ccffff,#ff00ff,#ff33ff,#ff66ff,#ff99ff,#ffccff,#ffffff".split(","); this.ShowTable = function(callBack,x,y){ if(flag != 1){ return; } if("function" != typeof(callBack)) return; this.Callback = callBack; document.getElementById(LayerID).style.display = ""; document.getElementById(LayerID).style.top = parseInt(y,10); document.getElementById(LayerID).style.left = parseInt(x,10); } this.Init = function(){ if(flag != (-1)){ return; } if(window[this.Instance] != this){ throw new Error(-1,""); } flag = 0; } this.SetColor = function(color){ if(flag != 1){ return; } this.Color = new String(color).toUpperCase(); document.getElementById(PreviewCellID).style.backgroundColor = this.Color; document.getElementById(RGBID).innerHTML = this.Color; } this.Select = function(color){ if(flag != 1){ return; } this.Color = new String(color).toUpperCase(); if("function" == typeof(this.Callback)) this.Callback(this.Color); this.Hide(); } this.Draw = function(){ if(flag == (-1)){ this.Init(); } if(flag != 0){ return ; } var shtml = ""; shtml += '<div id="' + LayerID + '" style="position:absolute;display:none;top:0px;left:0px;width:214px;height:145px;overflow:visible;border:0px;z-index:999999;">'; shtml += this.GetTable(); shtml += '</div>'; document.write(shtml); flag = 1; } this.Hide = function(){ if(flag != 1){ return; } document.getElementById(LayerID).style.display = "none"; } this.GetTable = function(){ var shtml = '\ <table width="214" onmousedown="event.cancelBubble=true;" height="145" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #000000">\n\ <tr>\n\ <td height="20" bgcolor="#D4D0C8" scope="col"><table width="100%" style="margin:2px;" border="0" cellspacing="0" cellpadding="0">\n\ <tr>\n\ <td width="24%" height="20" style="background-color:#ffffff;border:solid 1px #000000" scope="col" id="' + PreviewCellID + '">&nbsp;</td>\n\ <td width="43%" height="20" scope="col"><div align="center" style="font-family:宋体;font-size:9pt;" id="' + RGBID + '"></div></td>\n\ <td width="33%" height="20" scope="col"><div align="center"></div></td>\n\ </tr>\n\ </table></td>\n\ </tr>\n\ <tr>\n\ <td>'; shtml += '<table border="0" cellspacing="1" bgcolor="#000000">'; shtml += '<tr height="10">'; for(var i=0,l=Colors.length;i<l;i++){ if(i%21 == 0){ shtml += "</tr><tr>"; } shtml += '<td height="10" width="10" bgcolor="' + Colors[i] + '" style="cursor:hand;" onmouseover="' + this.Instance + '.SetColor(bgColor)" onmousedown="' + this.Instance + '.Select(bgColor)"></td>'; } shtml += '</table>'; shtml += ' </td>\n\ </tr>\n\ </table>'; return shtml; } }
 提示：您可以先修改部分代码再运行

调用方法：

复制内容到剪贴板

代码:

<script language="javascript">
function _callback(_color){
    alert(_color);
}
var colorTable = new ColorTable("colorTable");
colorTable.Draw();
colorTable.ShowTable(_callback,0,0);
</script>

演示：

http://www.jsgod.net/js/test_color_table.html

[ 本帖最后由 yaba 于 2006-7-22 21:02 编辑 ]

支持一下，如果颜色数组能想办法算出来就比较好了

<html id="container"> <head><title>soEditor: Color Palette</title> <STYLE TYPE="text/css"> <!-- body, td, button { font: MessageBox; } .sliderHandle {position: relative; cursor: default;} td {font-size: 10px; font-family: verdana} .outerSlideContainer {width: 150; height: 6; margin-left: 0; border: 0px;} .gradContainer {width: 140; height: 6; border: 1px inset window; position: absolute; z-index: 4; font-size: 1; overflow: hidden; margin-left: 5px;} .sliderHandle {width: 11; height: 14; cursor: hand; border: 0 outset white; overflow: hidden; z-index: 5;} .sliderHandle img {width: 11; height: 14;} .lineContainer {position: absolute; width: 139; height: 6; z-index: 0; margin-left: 5px;} .line {width: 139; height: 6; z-index: 0; overflow: hidden; filter: alpha(style=1)} #colorBox {width: 25; height: 40; border: 1 inset window; margin-left: 2px;} #colorImage { border: 1px inset window; cursor: hand;} input {padding: 0; margin: 0px; font-size: 10px; margin-left: 0px; border: 1px inset window;} button {font-family: Arial, Helvetica; font-size: 8pt} a:hover { background:transparent } --> </STYLE> <SCRIPT LANGUAGE="Javascript"> <!-- /////////////////////////////////////////////////////////////////////// // This slidebar script was designed by Erik Arvidsson for WebFX // // // // For more info and examples see: http://webfx.eae.net // // or send mail to erik@eae.net // // // // Feel free to use this code as lomg as this disclaimer is // // intact. // /////////////////////////////////////////////////////////////////////// var dragobject = null; var type; var onchange = ""; var tx; var ty; var red = 0; var green = 0; var blue = 0; function getReal(el, type, value) { temp = el; while ((temp != null) && (temp.tagName != "BODY")) { if (eval("temp." + type) == value) { el = temp; return el; } temp = temp.parentElement; } return el; } function moveme_onmousedown() { var tmp = getReal(window.event.srcElement, "className", "sliderHandle"); //Traverse the element tree if(tmp.className == "sliderHandle") { dragobject = tmp; //This is a global reference to the current dragging object onchange = dragobject.getAttribute("onchange"); //Set the onchange function if (onchange == null) onchange = ""; type = dragobject.getAttribute("type"); //Find the type if (type=="y") //Vertical ty = (window.event.clientY - dragobject.style.pixelTop); else //Horizontal tx = (window.event.clientX - dragobject.style.pixelLeft); window.event.returnValue = false; window.event.cancelBubble = true; } else { dragobject = null; //Not draggable } } function moveme_onmouseup() { if(dragobject) { dragobject = null; } } function moveme_onmousemove() { if(dragobject) { if (type=="y") { if(event.clientY >= 0) { if ((event.clientY - ty >= 0) && (event.clientY - ty <= dragobject.parentElement.offsetHeight - dragobject.offsetHeight)) { dragobject.style.top = event.clientY - ty; } if (event.clientY - ty < 0) { dragobject.style.top = "0"; } if (event.clientY - ty > dragobject.parentElement.offsetHeight - dragobject.offsetHeight - 0) { dragobject.style.top = dragobject.parentElement.offsetHeight - dragobject.offsetHeight; } dragobject.value = dragobject.style.pixelTop / (dragobject.parentElement.offsetHeight - dragobject.offsetHeight); eval(onchange.replace(/this/g, "dragobject")); } } else { if(event.clientX >= 0) { if ((event.clientX - tx >= 0) && (event.clientX - tx <= dragobject.parentElement.offsetWidth - dragobject.offsetWidth)) { dragobject.style.left = event.clientX - tx; } if (event.clientX - tx < 0) { dragobject.style.left = "0"; } if (event.clientX - tx > dragobject.parentElement.clientWidth - dragobject.offsetWidth - 0) { dragobject.style.left = dragobject.parentElement.clientWidth - dragobject.offsetWidth; } dragobject.value = dragobject.style.pixelLeft / (dragobject.parentElement.clientWidth - dragobject.offsetWidth); eval(onchange.replace(/this/g, "dragobject")); } } window.event.returnValue = false; window.event.cancelBubble = true; } } function setValue(el, val) { el.value = val; if (el.getAttribute("TYPE") == "x") el.style.left = val * (el.parentElement.clientWidth - el.offsetWidth); else el.style.top = val * (el.parentElement.clientHeight - el.offsetHeight); eval(el.onchange.replace(/this/g, "el")) } function IsDigit(allowPercent) { if (allowPercent) return ((event.keyCode >= 48) && (event.keyCode <= 57) || event.keyCode == 37) else return (event.keyCode >= 48) && (event.keyCode <= 57) } function hsvToRgb(hsv) { var rgb = new Object(); var i, f, p, q, t; if (hsv.s == 0) { // achromatic (grey) rgb.r = rgb.g = rgb.b = hsv.v; return rgb; } hsv.h /= 60; // sector 0 to 5 i = Math.floor( hsv.h ); f = hsv.h - i; // factorial part of h p = hsv.v * ( 1 - hsv.s ); q = hsv.v * ( 1 - hsv.s * f ); t = hsv.v * ( 1 - hsv.s * ( 1 - f ) ); switch( i ) { case 0: rgb.r = hsv.v; rgb.g = t; rgb.b = p; break; case 1: rgb.r = q; rgb.g = hsv.v; rgb.b = p; break; case 2: rgb.r = p; rgb.g = hsv.v; rgb.b = t; break; case 3: rgb.r = p; rgb.g = q; rgb.b = hsv.v; break; case 4: rgb.r = t; rgb.g = p; rgb.b = hsv.v; break; default: // case 5: rgb.r = hsv.v; rgb.g = p; rgb.b = q; break; } return rgb; } function calculateRGB() { if (window.event.button == 1 && dragobject == null) { var hsv = new Object(); var h = window.event.srcElement.offsetHeight; var y = window.event.offsetY; hsv.h = 360 * window.event.offsetX / window.event.srcElement.offsetWidth; if (y > h/2) { hsv.s = 1.0; hsv.v = 2 * (h - y) / h; } else { hsv.v = 1.0; hsv.s = y / (h/2); } var rgb = hsvToRgb(hsv); public_setColor(rgb.r, rgb.g, rgb.b); } } // This function is called when dragging a slider. function update(color) { switch(color) { case 'red': red = Math.round(255*redSlider.value); redInput.value = Math.round(red); break; case 'green': green = Math.round(255*greenSlider.value); greenInput.value = Math.round(green); break; case 'blue': blue = Math.round(255*blueSlider.value); blueInput.value = Math.round(blue); break; } var color = "RGB(" + red + "," + green + "," + blue + ")"; window.status = color; colorBox.style.backgroundColor = color; redLeft.style.background = "RGB(" + 0 + "," + green + "," + blue + ")"; redRight.style.background = "RGB(" + 255 + "," + green + "," + blue + ")"; greenLeft.style.background = "RGB(" + red + "," + 0 + "," + blue + ")"; greenRight.style.background = "RGB(" + red + "," + 255 + "," + blue + ")"; blueLeft.style.background = "RGB(" + red + "," + green + "," + 0 + ")"; blueRight.style.background = "RGB(" + red + "," + green + "," + 255 + ")"; var rHex = red.toString(16).toUpperCase(); var gHex = green.toString(16).toUpperCase(); var bHex = blue.toString(16).toUpperCase(); if (rHex.length < 2) rHex = '0' + rHex; if (gHex.length < 2) gHex = '0' + gHex; if (bHex.length < 2) bHex = '0' + bHex; hexValue.value= '#' + rHex + gHex + bHex; } function updateInput(slider, v) { if (!isNaN(v)) setValue(slider, Math.min(255, v)/255); } function updateHex(value) { red = parseInt(value.substring(1,3), 16); green = parseInt(value.substring(3,5), 16); blue = parseInt(value.substring(5,7), 16); redInput.value = red; greenInput.value = green; blueInput.value = blue; updateInput(redSlider, red); updateInput(greenSlider, green); updateInput(blueSlider, blue); } function clickOnGrad(sliderEl) { setValue(sliderEl, Math.min(Math.abs((event.offsetX+1)/event.srcElement.offsetWidth), 1.0)); } function public_setColor(r, g, b) { setValue(redSlider, Math.min(1.0, r)); setValue(greenSlider, Math.min(1.0, g)); setValue(blueSlider, Math.min(1.0, b)); } function init() { document.onmousedown = moveme_onmousedown; document.onmouseup = moveme_onmouseup; document.onmousemove = moveme_onmousemove; var color = (window.dialogArguments)?window.dialogArguments['color']:''; var re=new RegExp("^#[ABCDEF0123456789]{6}$", 'i'); if (color && re.test(color)) updateHex(color); hexValue.focus(); } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript" FOR="Ok" EVENT="onclick"> <!-- window.returnValue = hexValue.value; window.close(); //--> </SCRIPT> </HEAD> <BODY BGCOLOR="buttonFace" LEFTMARGIN=3 TOPMARGIN=3 onselectstart="window.event.returnValue=false;window.event.cancelBubble=true" ondragstart="return false" onLoad="init()"> <FIELDSET> <LEGEND><B>Color picker</B></LEGEND> <TABLE><TR><TD> <TABLE BORDER="0"> <tr> <td align="right">R</td> <td> <span class="outerSlideContainer"> <div class="gradContainer" onclick="clickOnGrad(redSlider)"></div> <div class="lineContainer" id="redRight" style="background: RGB(255, 0, 0);"> <div class="line" id="redLeft" style="background: RGB(0,0,0);"> </div> </div> <div id="redSlider" class="sliderHandle" type="x" value="0" title="Red" onchange="update('red')"><img src="attachments/2006/7/23/arrow_FU5qy1Z3TziR.gif"></div> </span> </td> <td> <input type="text" style="width:25px" id="redInput" value="0" onchange="updateInput(redSlider,this.value)" onselectstart="window.event.cancelBubble=true" onKeyPress="event.returnValue=IsDigit()"> </td> </tr> <tr> <td align="right">G</td> <td> <span class="outerSlideContainer"> <div class="gradContainer" onclick="clickOnGrad(greenSlider)"></div> <div class="lineContainer" id="greenRight" style="background: RGB(0, 255, 0);"> <div class="line" id="greenLeft" style="background: RGB(0, 0, 0);"> </div> </div> <div id="greenSlider" class="sliderHandle" type="x" value="0" title="Green" onchange="update('green')"><img src="attachments/2006/7/23/arrow_FU5qy1Z3TziR.gif"></div> </span></td> <td> <input type="text" style="width:25px" id="greenInput" value="0" onchange="updateInput(greenSlider,this.value)" onselectstart="window.event.cancelBubble=true" onKeyPress="event.returnValue=IsDigit()"> </td> </tr> <tr> <td align="right">B</td> <td> <span class="outerSlideContainer"> <div class="gradContainer" onclick="clickOnGrad(blueSlider)"></div> <div class="lineContainer" id="blueRight" style="background:RGB(0,0,255)"> <div class="line" id="blueLeft" style="background:RGB(0,0,0)"> </div> </div> <div id="blueSlider" class="sliderHandle" type="x" value="0" title="Blue" onchange="update('blue')"><img src="attachments/2006/7/23/arrow_FU5qy1Z3TziR.gif"></div> </span> </td> <td> <input type="text" style="width:25px" id="blueInput" value="0" onchange="updateInput(blueSlider,this.value)" onselectstart="window.event.cancelBubble=true" onKeyPress="event.returnValue=IsDigit()"> </td> </tr> <TR> <TD>HEX</TD> <TD ALIGN="right"><INPUT TYPE="text" NAME="hexValue" VALUE="#000000" STYLE="width:144px" onchange="updateHex(this.value)" onselectstart="window.event.cancelBubble=true"></TD> <TD ROWSPAN="2"><DIV ID="colorBox" STYLE="background-color:#000000"></DIV></TD> </TR> <TR> <TD COLSPAN="2" ALIGN="right"> <IMG src="attachments/2006/7/23/colors_g3yn3Zaheg48.jpg" WIDTH="164" HEIGHT="20" ID="colorImage" onmousedown="calculateRGB()" TITLE="Click to select color from this palette" onselectstart="window.event.returnValue=false;window.event.cancelBubble=true;"> </TD> </TR> </TABLE> </TD><TD ALIGN="center"> <TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0> <SCRIPT LANGUAGE="Javascript"> <!-- 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="#" '); document.write('onClick="updateHex(\'#'+clr[k]+clr[j+m]+clr[i]+'\')\;">'); document.write('<IMG src="icons/pixel.gif" WIDTH=8 HEIGHT=8 BORDER=0></A></TD>\n'); } } j+=3; document.write('</TR>\n'); } } //--> </SCRIPT> </TABLE> 216 color web palette </TD></TR></TABLE> <P ALIGN="right" STYLE="margin:5px 5px 5px 5px"> <BUTTON ID="Ok">Ok</BUTTON> &nbsp; <BUTTON ONCLICK="window.close()">Cancel</BUTTON> </P> </FIELDSET> <DIV STYLE="position:absolute;top:3px;left:270px;background:buttonFace;font-size:9px"> &nbsp;&copy;2002 by Web Power&nbsp; </DIV> </body> </html>
 提示：您可以先修改部分代码再运行

参考
网页调色板收集
http://bbs.blueidea.com/viewthread.php?tid=1724860&page=
http://search.blueidea.com/?q=%E7%BD%91%E9%A1%B5%E8%B0%83%E8%89%B2%E6%9D%BF&bisearch=bbs

楼举说得好啊，我顶啊。

GOOD 。正寻觅之呢。后面的又来个锦上添花。