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
2007-06-16
http://blog.csdn.net/btbtd
下载: http://files.myopera.com/btbtd/javascript/function/fGetCompColor.7z
演示: http://files.myopera.com/btbtd/javascript/function/fGetCompColor.htm
内容:
1. JS 取补色函数 fGetCompColor 及相关演示(fGetCompColor.htm)
- <!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">
- <!-- DW6 -->
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>shawl.qiu template</title>
- <script type="text/javascript">
- //<![CDATA[
- document.write("<p/><hr/><p/>预定颜色: <p/>");
- var arTest = [];
- // 红色系
- 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";
- var iCount = 0;
- var iLen = 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/>");
- var iCount = 0;
- var iLen = 100;
- while(iCount<iLen)
- {
- var MyColor = "#"+fRndCor(0, 255, true);
- fTest(MyColor, fGetCompColor(MyColor));
- document.write("<li/>BgColor: "+MyColor+" | FgColor: "+fGetCompColor(MyColor));
- //document.write("<p/>");
- iCount++;
- }
- function fGetCompColor(sInput, sOpt, bNoSharp, bDebug)
- {// shawl.qiu script
- if(!sInput) sInput = "#000000";
- if(!sOpt) sOpt = 'hex';
- sOpt = sOpt.toLowerCase();
- var arCell = [];
- var arHex = [];
- var arHexFinal = [];
- var arInt = [];
- var arIntFinal = [];
- var Debug = bDebug;
- if(Debug)
- {
- alert
- (
- "sInput: "+sInput
- +" sOpt: "+sOpt
- );
- }
- sInput = sInput.replace(/^/#/, "");
- switch(sOpt)
- {
- case "rgb":
- break;
- default:
- if(sInput.length==3)
- {
- var arTemp = 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) return arHexFinal.join("");
- return "#"+arHexFinal.join("");
- }
- else
- {
- alert("无法识别的十六进制颜色代码!");
- }
- break;
- }
- return "000000";
- function fStringToArray(sInput)
- {// shawl.qiu script
- var arCell = [];
- var iCount = 0;
- var iLen = sInput.length;
- while(iCount<iLen)
- {
- arCell[iCount] = sInput.charAt(iCount);
- iCount++;
- }
- return arCell;
- } // end function fStringToArray
- function fPadStr(sSrc, sPad, nLen)
- {// shawl.qiu script
- if(!sSrc)return false;
- if(!sPad)sPad='0';
- if(!nLen)nLen=2;
- sSrc+='';
- if(sSrc.length>=nLen)return sSrc;
- sPad=new Array(nLen+1).join(sPad);
- var re=new RegExp('.*(.{'+(nLen)+'})$');
- return (sPad+sSrc).replace(re,'$1');
- } // end function fPadStr
- } // end function fGetCompColor
- function fRndCor(under, over, bNoPadSymbol)
- {// shawl.qiu code
- if(arguments.length==1)
- {
- var over=under;
- under=0;
- }
- else if(arguments.length==0)
- {
- var under=0;
- var over=255;
- } // end if
- var r=fRandomBy(under, over).toString(16);
- r=fStrPadStr(r, r, 2);
- var g=fRandomBy(under, over).toString(16);
- g=fStrPadStr(g, g, 2);
- var b=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()+';';
- function fRandomBy(under, over)
- {// shawl.qiu code
- switch(arguments.length)
- {
- case 1: return parseInt(Math.random()*under+1);
- case 2: return parseInt(Math.random()*(over-under+1) + under);
- default: return 0;
- } // end switch
- } // end function fRandomBy
- function fStrPadStr(sSrc, sPad, nLen)
- {
- if(!sSrc)return false;
- if(!sPad)sPad='0';
- if(!nLen)nLen=2;
- sSrc+='';
- if(sSrc.length>=nLen)return sSrc;
- sPad=new Array(nLen+1).join(sPad);
- var re=new RegExp('.*(.{'+(nLen)+'})$');
- return (sPad+sSrc).replace(re,'$1');
- } // end function fStrPadStr
- } // end function fRndCor
- function fTest(sBgColor, sFgColor)
- {
- document.write
- (
- '<div style=" color:'+sFgColor
- +'; background-color:'+sBgColor+'; font-size:18px;">补色测试, Complementary Color test.</div>'
- );
- } // end function fTest
- //]]>
- </script>
- </head>
- <body>
- </body>
- </html>