js 中RGB十六进制码补色算法及实现 by shawl.qiu
说明:
首先要明白, 什么是 RGB, RGB 分别是Red, Green, Blue 的英文缩写.
希望更深入了解请查阅相关资料.
Web 中 RGB 分别是 0-255 的值所表示的.
RGB = (0-255)(0-255)(0-255), 单独表示:
R = 255 0 0
G = 0 255 0
B = 0 0 255
白色 = 255 255 255
黑色 = 0 0 0
RGB 十六进制码为 六个0-9a-f 组成的颜色代码
(0-9a-f)(0-9a-f)(0-9a-f)(0-9a-f)(0-9a-f)(0-9a-f)
如:
ffffff, 000000
对应于RGB 依次为每二个代码对应 RGB 一个
如: 00CCFF
00 = R
CC = G
FF = B
也可以是三个 0-9a-f, 但每一个代表着重复一次 本身
(0-9a-f)(0-9a-f)(0-9a-f)
如:
fff = ffffff
000 = 000000
0f0 = 00ff00
依次对应于 RGB
什么是补色呢?
希望更深入了解请查阅相关资料.
在 RGB 颜色空间中, 补色的意思就是两个颜色相加得到 白色的话, 就是补色.
如:
白色(RGB: 255 255 255) 的补色是黑色(RGB: 0 0 0)
白色(十六进制: FFFFFF) 的补色是黑色((十六进制: 000000)
现在描述 取 RGB十六进制码 补色 操作:
假如有 RGB十六进制码 FF0000, 如何取补色呢?
首先把 FF0000 分为 FF, 00, 00, 即三个部分, 方便对应于RGB.
再把上面的三部分转为十进制, 即 255, 0, 0
然后再使用 255 分别减去十进制的三部分, 即 0, -255, -255
再取绝对值, 得到 0, 255, 255
再把上面的绝对值三部分转为十六进制, 即: 00, ff, ff
取补完成, 怎么样, 很简单吧...
后语:
取补色是设计中常用到的一种技巧, 我弄这个的主要原因是使用随机颜色,
生成背景色和前景色, 希望可以清晰辨认, 最好的方法就是使用取补色.
比如已知背景色 X, 我就可以从X 得到X的补色做为前景色, 从而达到清晰辩认.
目录:
1. JS 取补色函数 fGetCompColor 及相关演示(fGetCompColor.htm)
shawl.qiu
-06-16
/btbtd
下载: /btbtd/javascript/function/fGetCompColor.7z
演示: /btbtd/javascript/function/fGetCompColor.htm
内容:
1. JS 取补色函数 fGetCompColor 及相关演示(fGetCompColor.htm)
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="/1999/xhtml"> <!--DW6--> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>shawl.qiutemplate</title> <scripttype="text/javascript"> //<![CDATA[ document.write("<p/><hr/><p/>预定颜色:<p/>"); vararTest=[]; //红色系 arTest[0]="#CF0070"; arTest[1]="#D70040"; arTest[2]="#C80852"; arTest[3]="#E61C64"; arTest[4]="#DC5B6F"; arTest[5]="#EE869A"; arTest[6]="#F09192"; arTest[7]="#E198C0"; arTest[8]="#F19C9F"; arTest[9]="#F5B2B2"; arTest[10]="#F7C8CF"; arTest[11]="#F8C6B5"; arTest[12]="#FCE5DF"; arTest[13]="#F29B87"; arTest[14]="#E60012"; arTest[15]="#D8000F"; arTest[16]="#A40027"; arTest[17]="#66192D"; arTest[18]="#C2737F"; //橙色系 arTest[19]="#EA5520"; arTest[20]="#ED6E3D"; arTest[21]="#C80852"; arTest[22]="#F18D00"; arTest[23]="#F39839"; arTest[24]="#F9C270"; arTest[25]="#E5A96B"; arTest[26]="#ECD6CA"; arTest[27]="#E3CCA9"; arTest[28]="#D3B78F"; arTest[29]="#B58654"; arTest[30]="#6A3315"; arTest[31]="#713B12"; arTest[32]="#694B23"; //黄色系 arTest[33]="#F7AB00"; arTest[34]="#FDD000"; arTest[35]="#FFD700"; arTest[36]="#FEDD78"; arTest[37]="#FFEAB4"; arTest[38]="#EBE5D1"; arTest[39]="#FFF8B1"; arTest[40]="#FFF463"; arTest[41]="#FFFF00"; arTest[42]="#FFF100"; arTest[43]="#EDD443"; arTest[44]="#D6C560"; arTest[45]="#C48F00"; arTest[46]="#999999"; arTest[47]="#FDFDFD"; //绿色系 arTest[48]="#C4D700"; arTest[49]="#9EBD19"; arTest[50]="#A9D06B"; arTest[51]="#87A256"; arTest[52]="#AAC468"; arTest[53]="#888637"; arTest[54]="#625A05"; arTest[55]="#3D7D53"; arTest[56]="#6ABD78"; arTest[57]="#15AE69"; arTest[58]="#42AB91"; arTest[59]="#7BB99B"; arTest[60]="#006550"; arTest[61]="#008E57"; arTest[62]="#008077"; //青蓝色系 arTest[63]="#B0DCD5"; arTest[64]="#A1D8E6"; arTest[65]="#59C3E2"; arTest[66]="#22AEE6"; arTest[67]="#94C6D0"; arTest[68]="#B1D4DB"; arTest[69]="#8BB0CD"; arTest[70]="#4C8DB5"; arTest[71]="#2983B1"; arTest[72]="#00A4C5"; arTest[73]="#008890"; arTest[74]="#006980"; arTest[75]="#007BBB"; arTest[76]="#005DAC"; arTest[77]="#004098"; arTest[78]="#1E50A2"; //蓝色系 arTest[79]="#F0F8FF"; arTest[80]="#007FFF"; arTest[81]="#0000FF"; arTest[82]="#007BA7"; arTest[83]="#2A52BE"; arTest[84]="#0047AB"; arTest[85]="#6495ED"; arTest[86]="#0000C8"; arTest[87]="#1560BD"; arTest[88]="#1E90FF"; arTest[89]="#4B0082"; arTest[90]="#002FA7"; arTest[91]="#BDBBD7"; arTest[92]="#003366"; arTest[93]="#000080"; arTest[94]="#CCCCFF"; arTest[95]="#32127A"; arTest[96]="#B0E0E6"; arTest[97]="#003153"; arTest[98]="#4169E1"; arTest[99]="#082567"; arTest[100]="#4682B4"; arTest[101]="#120A8F"; arTest[102]="#ADD8E6"; //靛青色系 arTest[103]="#5B77AF"; arTest[104]="#6684B0"; arTest[105]="#134098"; arTest[106]="#527AA3"; arTest[107]="#005789"; arTest[108]="#005178"; arTest[109]="#005978"; arTest[110]="#00456B"; arTest[111]="#001954"; arTest[112]="#002E5A"; arTest[113]="#38426A"; arTest[114]="#04163A"; //紫色系 arTest[115]="#735B9F"; arTest[116]="#7C509D"; arTest[117]="#D8BFCB"; arTest[118]="#BBA1CB"; arTest[119]="#A688B1"; arTest[120]="#7E4985"; arTest[121]="#923D92"; arTest[122]="#6F196F"; arTest[123]="#C5AFC0"; arTest[124]="#8B0062"; arTest[125]="#D369A4"; arTest[126]="#D188A8"; arTest[127]="#D188A8"; arTest[128]="#EDE0E6"; arTest[129]="#9D899D"; //灰色系 arTest[130]="#FFFFFF"; arTest[131]="#E6E6E6"; arTest[132]="#CCCCCC"; arTest[133]="#B3B3B3"; arTest[134]="#999999"; arTest[135]="#808080"; arTest[136]="#666666"; arTest[137]="#4D4D4D"; arTest[138]="#1A1A1A"; arTest[139]="#000000"; variCount=0; variLen=arTest.length; while(iCount<iLen) { /* fTest(fGetCompColor(arTest[iCount]),arTest[iCount]); document.write("<li/>FgColor:"+arTest[iCount]+"|BgColor:"+fGetCompColor(arTest[iCount])); */ fTest(arTest[iCount],fGetCompColor(arTest[iCount])); document.write("<li/>BgColor:"+arTest[iCount]+"|FgColor:"+fGetCompColor(arTest[iCount])); //document.write("<p/>"); iCount++; } document.write("<p/><hr/><p/>随机颜色:<p/>"); variCount=0; variLen=100; while(iCount<iLen) { varMyColor="#"+fRndCor(0,255,true); fTest(MyColor,fGetCompColor(MyColor)); document.write("<li/>BgColor:"+MyColor+"|FgColor:"+fGetCompColor(MyColor)); //document.write("<p/>"); iCount++; } functionfGetCompColor(sInput,sOpt,bNoSharp,bDebug) {//shawl.qiuscript if(!sInput)sInput="#000000"; if(!sOpt)sOpt='hex'; sOpt=sOpt.toLowerCase(); vararCell=[]; vararHex=[]; vararHexFinal=[]; vararInt=[]; vararIntFinal=[]; varDebug=bDebug; if(Debug) { alert ( "sInput:"+sInput +"sOpt:"+sOpt ); } sInput=sInput.replace(/^/#/,""); switch(sOpt) { case"rgb": break; default: if(sInput.length==3) { vararTemp=fStringToArray(sInput); sInput=""+arTemp[0]+arTemp[0]+arTemp[1]+arTemp[1]+arTemp[2]+arTemp[2]; } if(sInput.length==6) { arCell=fStringToArray(sInput); arHex[0]="0x"+arCell[0]+arCell[1]; arHex[1]="0x"+arCell[2]+arCell[3]; arHex[2]="0x"+arCell[4]+arCell[5]; arInt[0]=parseInt(arHex[0],16); arInt[1]=parseInt(arHex[1],16); arInt[2]=parseInt(arHex[2],16); arIntFinal[0]=Math.abs(255-arInt[0]); arIntFinal[1]=Math.abs(255-arInt[1]); arIntFinal[2]=Math.abs(255-arInt[2]); arHexFinal[0]=fPadStr(arIntFinal[0].toString(16)).toUpperCase(); arHexFinal[1]=fPadStr(arIntFinal[1].toString(16)).toUpperCase(); arHexFinal[2]=fPadStr(arIntFinal[2].toString(16)).toUpperCase(); if(Debug) { alert("arCell:"+arCell); alert("arHex:"+arHex); alert("arInt:"+arInt); alert("arIntFinal:"+arIntFinal); alert("arHexFinal:"+arHexFinal); } if(bNoSharp)returnarHexFinal.join(""); return"#"+arHexFinal.join(""); } else { alert("无法识别的十六进制颜色代码!"); } break; } return"000000"; functionfStringToArray(sInput) {//shawl.qiuscript vararCell=[]; variCount=0; variLen=sInput.length; while(iCount<iLen) { arCell[iCount]=sInput.charAt(iCount); iCount++; } returnarCell; }//endfunctionfStringToArray functionfPadStr(sSrc,sPad,nLen) {//shawl.qiuscript if(!sSrc)returnfalse; if(!sPad)sPad='0'; if(!nLen)nLen=2; sSrc+=''; if(sSrc.length>=nLen)returnsSrc; sPad=newArray(nLen+1).join(sPad); varre=newRegExp('.*(.{'+(nLen)+'})$'); return(sPad+sSrc).replace(re,'$1'); }//endfunctionfPadStr }//endfunctionfGetCompColor functionfRndCor(under,over,bNoPadSymbol) {//shawl.qiucode if(arguments.length==1) { varover=under; under=0; } elseif(arguments.length==0) { varunder=0; varover=255; }//endif varr=fRandomBy(under,over).toString(16); r=fStrPadStr(r,r,2); varg=fRandomBy(under,over).toString(16); g=fStrPadStr(g,g,2); varb=fRandomBy(under,over).toString(16); b=fStrPadStr(b,b,2); //defaultStatus=r+''+g+''+b if(bNoPadSymbol)return(""+r+g+b).toUpperCase(); return'#'+(r+g+b).toUpperCase()+';'; functionfRandomBy(under,over) {//shawl.qiucode switch(arguments.length) { case1:returnparseInt(Math.random()*under+1); case2:returnparseInt(Math.random()*(over-under+1)+under); default:return0; }//endswitch }//endfunctionfRandomBy functionfStrPadStr(sSrc,sPad,nLen) { if(!sSrc)returnfalse; if(!sPad)sPad='0'; if(!nLen)nLen=2; sSrc+=''; if(sSrc.length>=nLen)returnsSrc; sPad=newArray(nLen+1).join(sPad); varre=newRegExp('.*(.{'+(nLen)+'})$'); return(sPad+sSrc).replace(re,'$1'); }//endfunctionfStrPadStr }//endfunctionfRndCor functionfTest(sBgColor,sFgColor) { document.write ( '<divstyle="color:'+sFgColor +';background-color:'+sBgColor+';font-size:18px;">补色测试,ComplementaryColortest.</div>' ); }//endfunctionfTest //]]> </script> </head> <body> </body> </html>
