js 中RGB十六进制码补色算法及实现 by shawl.qiu

本文链接：https://blog.csdn.net/btbtd/article/details/1653983

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