网页调色板收集

junstudio

管理员

Rank: 9 Rank: 9 Rank: 9

1^# 大中小发表于 2007-6-18 15:41 只看该作者

网页调色板收集

1，调用Windows自带的配色控件

提示：您可以先修改部分代码再运行

2，晕~！颜色的16进指代码不用数组不行

<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>

提示：您可以先修改部分代码再运行

3，216色，自己看吧

<HTML><HEAD><TITLE>Typhoon Start JavaScript Fairyland</TITLE>
<STYLE type=text/<span href="tag.php?name=css" onclick="tagshow(event)" class="t_tag">css</span>>#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; VI<span href="tag.php?name=SIB" onclick="tagshow(event)" class="t_tag">SIB</span>ILITY: 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; VI<span href="tag.php?name=SIB" onclick="tagshow(event)" class="t_tag">SIB</span>ILITY: 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; VI<span href="tag.php?name=SIB" onclick="tagshow(event)" class="t_tag">SIB</span>ILITY: 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; VI<span href="tag.php?name=SIB" onclick="tagshow(event)" class="t_tag">SIB</span>ILITY: 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; VI<span href="tag.php?name=SIB" onclick="tagshow(event)" class="t_tag">SIB</span>ILITY: 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; VI<span href="tag.php?name=SIB" onclick="tagshow(event)" class="t_tag">SIB</span>ILITY: 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; VI<span href="tag.php?name=SIB" onclick="tagshow(event)" class="t_tag">SIB</span>ILITY: visible; WIDTH: 50px; Z-INDEX: 1; layer-background-color: #000000
}
#hexValue {
    HEIGHT: 20px; LEFT: 54px; POSITION: absolute; TOP: 160px; VI<span href="tag.php?name=SIB" onclick="tagshow(event)" class="t_tag">SIB</span>ILITY: 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; VI<span href="tag.php?name=SIB" onclick="tagshow(event)" class="t_tag">SIB</span>ILITY: visible; WIDTH: 320px; Z-INDEX: 1
}
</STYLE>
<SCRIPT language=JavaScript>

</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>

</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>

提示：您可以先修改部分代码再运行

4，颜色更丰富

<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>

提示：您可以先修改部分代码再运行

5，两个文件一起保存，值得推荐
test1.html

提示：您可以先修改部分代码再运行

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>

提示：您可以先修改部分代码再运行

TOP

‹‹ 上一主题 | 下一主题 ››

393张高清晰web2.0站点截图	425款精品毛笔墨迹+38款墨迹底纹..	10位Master级别的Photoshop高手	绝对漂亮的笔刷
Soul 近期新作品欣赏..	熟女养成日志—长草	魔幻抽象/吸血鬼传说！！	photoshop仿CG滤镜