您的位置：首页 > Web前端 > JavaScript

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

2007-06-16 00:50 656 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 算法 function c hex html 测试

相关文章推荐

新的分享

章节导航