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

最新推荐文章于 2024-04-17 22:26:24 发布
原创 最新推荐文章于 2024-04-17 22:26:24 发布 · 7.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#算法 #function #c #hex #html #测试

本文介绍了一种JavaScript中实现的颜色补色算法，通过该算法可以轻松地获取任何RGB十六进制颜色代码的补色。这对于网页设计中背景色与前景色的搭配非常有用，确保了颜色之间的对比度，使页面元素易于区分。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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.youkuaiyun.com/btbtd

下载:  http://files.myopera.com/btbtd/javascript/function/fGetCompColor.7z
演示:  http://files.myopera.com/btbtd/javascript/function/fGetCompColor.htm

内容:
1. JS 取补色函数 fGetCompColor 及相关演示(fGetCompColor.htm)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <!-- DW6 -->
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>shawl.qiu template</title>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  document.write("<p/><hr/><p/>预定颜色: <p/>");
  10.   
  11.  var arTest = [];
  12.   // 红色系
  13.   arTest[0] = "#CF0070";
  14.   arTest[1] = "#D70040";
  15.   arTest[2] = "#C80852";
  16.   arTest[3] = "#E61C64";
  17.   arTest[4] = "#DC5B6F";
  18.   arTest[5] = "#EE869A";
  19.   arTest[6] = "#F09192";
  20.   arTest[7] = "#E198C0";
  21.   arTest[8] = "#F19C9F"; 
  22.   arTest[9] = "#F5B2B2"; 
  23.   arTest[10] = "#F7C8CF"; 
  24.   arTest[11] = "#F8C6B5"; 
  25.   arTest[12] = "#FCE5DF"; 
  26.   arTest[13] = "#F29B87"; 
  27.   arTest[14] = "#E60012"; 
  28.   arTest[15] = "#D8000F"; 
  29.   arTest[16] = "#A40027"; 
  30.   arTest[17] = "#66192D"; 
  31.   arTest[18] = "#C2737F";
  32.    
  33.   // 橙色系
  34.   arTest[19] = "#EA5520"; 
  35.   arTest[20] = "#ED6E3D"; 
  36.   arTest[21] = "#C80852"; 
  37.   arTest[22] = "#F18D00"; 
  38.   arTest[23] = "#F39839"; 
  39.   arTest[24] = "#F9C270"; 
  40.   arTest[25] = "#E5A96B"; 
  41.   arTest[26] = "#ECD6CA"; 
  42.   arTest[27] = "#E3CCA9"; 
  43.   arTest[28] = "#D3B78F"; 
  44.   arTest[29] = "#B58654"; 
  45.   arTest[30] = "#6A3315"; 
  46.   arTest[31] = "#713B12"; 
  47.   arTest[32] = "#694B23"; 
  48.   
  49.   // 黄色系
  50.   arTest[33] = "#F7AB00"; 
  51.   arTest[34] = "#FDD000"; 
  52.   arTest[35] = "#FFD700"; 
  53.   arTest[36] = "#FEDD78"; 
  54.   arTest[37] = "#FFEAB4"; 
  55.   arTest[38] = "#EBE5D1"; 
  56.   arTest[39] = "#FFF8B1"; 
  57.   arTest[40] = "#FFF463"; 
  58.   arTest[41] = "#FFFF00"; 
  59.   arTest[42] = "#FFF100"; 
  60.   arTest[43] = "#EDD443"; 
  61.   arTest[44] = "#D6C560"; 
  62.   arTest[45] = "#C48F00"; 
  63.   arTest[46] = "#999999"; 
  64.   arTest[47] = "#FDFDFD"; 
  65.   
  66.   // 绿色系
  67.   arTest[48] = "#C4D700"; 
  68.   arTest[49] = "#9EBD19"; 
  69.   arTest[50] = "#A9D06B"; 
  70.   arTest[51] = "#87A256"; 
  71.   arTest[52] = "#AAC468"; 
  72.   arTest[53] = "#888637"; 
  73.   arTest[54] = "#625A05"; 
  74.   arTest[55] = "#3D7D53"; 
  75.   arTest[56] = "#6ABD78"; 
  76.   arTest[57] = "#15AE69"; 
  77.   arTest[58] = "#42AB91"; 
  78.   arTest[59] = "#7BB99B"; 
  79.   arTest[60] = "#006550"; 
  80.   arTest[61] = "#008E57"; 
  81.   arTest[62] = "#008077"; 
  82.   
  83.   // 青蓝色系
  84.   arTest[63] = "#B0DCD5"; 
  85.   arTest[64] = "#A1D8E6"; 
  86.   arTest[65] = "#59C3E2"; 
  87.   arTest[66] = "#22AEE6"; 
  88.   arTest[67] = "#94C6D0"; 
  89.   arTest[68] = "#B1D4DB"; 
  90.   arTest[69] = "#8BB0CD"; 
  91.   arTest[70] = "#4C8DB5"; 
  92.   arTest[71] = "#2983B1"; 
  93.   arTest[72] = "#00A4C5"; 
  94.   arTest[73] = "#008890"; 
  95.   arTest[74] = "#006980"; 
  96.   arTest[75] = "#007BBB"; 
  97.   arTest[76] = "#005DAC"; 
  98.   arTest[77] = "#004098"; 
  99.   arTest[78] = "#1E50A2"; 
  100.   
  101.   // 蓝色系
  102.   arTest[79] = "#F0F8FF"; 
  103.   arTest[80] = "#007FFF"; 
  104.   arTest[81] = "#0000FF"; 
  105.   arTest[82] = "#007BA7"; 
  106.   arTest[83] = "#2A52BE"; 
  107.   arTest[84] = "#0047AB"; 
  108.   arTest[85] = "#6495ED"; 
  109.   arTest[86] = "#0000C8"; 
  110.   arTest[87] = "#1560BD"; 
  111.   arTest[88] = "#1E90FF"; 
  112.   arTest[89] = "#4B0082"; 
  113.   arTest[90] = "#002FA7"; 
  114.   arTest[91] = "#BDBBD7"; 
  115.   arTest[92] = "#003366"; 
  116.   arTest[93] = "#000080"; 
  117.   arTest[94] = "#CCCCFF"; 
  118.   arTest[95] = "#32127A"; 
  119.   arTest[96] = "#B0E0E6"; 
  120.   arTest[97] = "#003153"; 
  121.   arTest[98] = "#4169E1"; 
  122.   arTest[99] = "#082567"; 
  123.   arTest[100] = "#4682B4"; 
  124.   arTest[101] = "#120A8F"; 
  125.   arTest[102] = "#ADD8E6"; 
  126.   
  127.   // 靛青色系
  128.   arTest[103] = "#5B77AF"; 
  129.   arTest[104] = "#6684B0"; 
  130.   arTest[105] = "#134098"; 
  131.   arTest[106] = "#527AA3"; 
  132.   arTest[107] = "#005789"; 
  133.   arTest[108] = "#005178"; 
  134.   arTest[109] = "#005978"; 
  135.   arTest[110] = "#00456B"; 
  136.   arTest[111] = "#001954"; 
  137.   arTest[112] = "#002E5A"; 
  138.   arTest[113] = "#38426A"; 
  139.   arTest[114] = "#04163A"; 
  140.   
  141.   //  紫色系
  142.   arTest[115] = "#735B9F"; 
  143.   arTest[116] = "#7C509D"; 
  144.   arTest[117] = "#D8BFCB"; 
  145.   arTest[118] = "#BBA1CB"; 
  146.   arTest[119] = "#A688B1"; 
  147.   arTest[120] = "#7E4985"; 
  148.   arTest[121] = "#923D92"; 
  149.   arTest[122] = "#6F196F"; 
  150.   arTest[123] = "#C5AFC0"; 
  151.   arTest[124] = "#8B0062"; 
  152.   arTest[125] = "#D369A4"; 
  153.   arTest[126] = "#D188A8"; 
  154.   arTest[127] = "#D188A8"; 
  155.   arTest[128] = "#EDE0E6"; 
  156.   arTest[129] = "#9D899D"; 
  157.   
  158.   // 灰色系
  159.   arTest[130] = "#FFFFFF"; 
  160.   arTest[131] = "#E6E6E6"; 
  161.   arTest[132] = "#CCCCCC"; 
  162.   arTest[133] = "#B3B3B3"; 
  163.   arTest[134] = "#999999"; 
  164.   arTest[135] = "#808080"; 
  165.   arTest[136] = "#666666"; 
  166.   arTest[137] = "#4D4D4D"; 
  167.   arTest[138] = "#1A1A1A"; 
  168.   arTest[139] = "#000000"; 
  169.   
  170.   var iCount = 0;
  171.   var iLen = arTest.length;
  172.   
  173.   while(iCount<iLen)
  174.   {
  175. /*
  176.    fTest(fGetCompColor(arTest[iCount]), arTest[iCount]);
  177.    document.write("<li/>FgColor: "+arTest[iCount]+" | BgColor: "+fGetCompColor(arTest[iCount]));
  178. */
  179.    fTest(arTest[iCount], fGetCompColor(arTest[iCount]));
  180.    document.write("<li/>BgColor: "+arTest[iCount]+" | FgColor: "+fGetCompColor(arTest[iCount]));
  181.    //document.write("<p/>");
  182.    iCount++;
  183.   }
  184.   
  185.   document.write("<p/><hr/><p/>随机颜色: <p/>");
  186.   
  187.   var iCount = 0;
  188.   var iLen = 100;
  189.   
  190.   while(iCount<iLen)
  191.   {
  192.    var MyColor = "#"+fRndCor(0, 255, true);
  193.    fTest(MyColor, fGetCompColor(MyColor));
  194.    document.write("<li/>BgColor: "+MyColor+" | FgColor: "+fGetCompColor(MyColor));
  195.    //document.write("<p/>");
  196.    iCount++;
  197.   }
  198.   
  199.  function fGetCompColor(sInput, sOpt, bNoSharp, bDebug)
  200.  {// shawl.qiu script
  201.   if(!sInput) sInput = "#000000";
  202.   if(!sOpt) sOpt = 'hex';
  203.   sOpt = sOpt.toLowerCase();
  204.   
  205.   var arCell = [];
  206.   var arHex = [];
  207.   var arHexFinal = [];
  208.   var arInt = [];
  209.   var arIntFinal = [];
  210.   
  211.   var Debug = bDebug;
  212.   
  213.   if(Debug)
  214.   {
  215.    alert
  216.    (
  217.     "sInput: "+sInput
  218.     +" sOpt: "+sOpt
  219.    );
  220.   }
  221.   
  222.   sInput = sInput.replace(/^/#/, "");
  223.    
  224.   switch(sOpt)
  225.   {
  226.    case "rgb":
  227.     break;
  228.     
  229.    default:
  230.     
  231.     if(sInput.length==3)
  232.     {
  233.      var arTemp = fStringToArray(sInput);
  234.      sInput = ""+arTemp[0]+arTemp[0]+arTemp[1]+arTemp[1]+arTemp[2]+arTemp[2];
  235.     }
  236.     
  237.     if(sInput.length==6)
  238.     {
  239.      arCell = fStringToArray(sInput);     
  240.      
  241.      arHex[0] = "0x"+arCell[0]+arCell[1];
  242.      arHex[1] = "0x"+arCell[2]+arCell[3];
  243.      arHex[2] = "0x"+arCell[4]+arCell[5];
  244.      
  245.      arInt[0] = parseInt(arHex[0], 16);
  246.      arInt[1] = parseInt(arHex[1], 16);
  247.      arInt[2] = parseInt(arHex[2], 16);
  248.      
  249.      arIntFinal[0] = Math.abs(255-arInt[0]);
  250.      arIntFinal[1] = Math.abs(255-arInt[1]);
  251.      arIntFinal[2] = Math.abs(255-arInt[2]);
  252.      
  253.      arHexFinal[0] = fPadStr(arIntFinal[0].toString(16)).toUpperCase();
  254.      arHexFinal[1] = fPadStr(arIntFinal[1].toString(16)).toUpperCase();
  255.      arHexFinal[2] = fPadStr(arIntFinal[2].toString(16)).toUpperCase();
  256.      
  257.      if(Debug)
  258.      {
  259.       alert("arCell: "+arCell);
  260.       alert("arHex: "+arHex);
  261.       alert("arInt: "+arInt);
  262.       alert("arIntFinal: "+arIntFinal);
  263.       alert("arHexFinal: "+arHexFinal);
  264.      }
  265.      
  266.      if(bNoSharp) return arHexFinal.join("");
  267.      
  268.      return "#"+arHexFinal.join("");
  269.     }
  270.     else
  271.     {
  272.      alert("无法识别的十六进制颜色代码!");
  273.     }
  274.     break;   
  275.   }
  276.   return "000000";
  277.  
  278.   function fStringToArray(sInput)
  279.   {// shawl.qiu script
  280.    var arCell = [];
  281.    var iCount = 0;
  282.    var iLen = sInput.length;
  283.    while(iCount<iLen)
  284.    {
  285.     arCell[iCount] = sInput.charAt(iCount);
  286.     iCount++;
  287.    }
  288.    
  289.    return arCell;
  290.   } // end function fStringToArray
  291.   
  292.   function fPadStr(sSrc, sPad, nLen)
  293.   {// shawl.qiu script
  294.    if(!sSrc)return false;
  295.    if(!sPad)sPad='0';
  296.    if(!nLen)nLen=2;
  297.    sSrc+='';
  298.    if(sSrc.length>=nLen)return sSrc;
  299.    sPad=new Array(nLen+1).join(sPad);
  300.    var re=new RegExp('.*(.{'+(nLen)+'})$');
  301.    return (sPad+sSrc).replace(re,'$1');
  302.   } // end function fPadStr
  303.  } // end function fGetCompColor
  304.  
  305.  function fRndCor(under, over, bNoPadSymbol)
  306.  {// shawl.qiu code
  307.   if(arguments.length==1)
  308.   {
  309.    var over=under;
  310.     under=0;
  311.   }
  312.   else if(arguments.length==0)
  313.   {
  314.    var under=0;
  315.    var over=255;
  316.   } // end if
  317.   
  318.   var r=fRandomBy(under, over).toString(16);
  319.    r=fStrPadStr(r, r, 2);
  320.   var g=fRandomBy(under, over).toString(16);
  321.    g=fStrPadStr(g, g, 2);
  322.   var b=fRandomBy(under, over).toString(16);
  323.    b=fStrPadStr(b, b, 2);
  324.    //defaultStatus=r+' '+g+' '+b
  325.   if(bNoPadSymbol) return (""+r+g+b).toUpperCase();
  326.   return '#'+(r+g+b).toUpperCase()+';';
  327.  
  328.   function fRandomBy(under, over)
  329.   {// shawl.qiu code
  330.    switch(arguments.length)
  331.    {
  332.     case 1: return parseInt(Math.random()*under+1);
  333.     case 2: return parseInt(Math.random()*(over-under+1) + under);
  334.     default: return 0;
  335.    } // end switch
  336.   } // end function fRandomBy
  337.   
  338.   function fStrPadStr(sSrc, sPad, nLen)
  339.   {
  340.    if(!sSrc)return false;
  341.    if(!sPad)sPad='0';
  342.    if(!nLen)nLen=2;
  343.    sSrc+='';
  344.    if(sSrc.length>=nLen)return sSrc;
  345.    sPad=new Array(nLen+1).join(sPad);
  346.    var re=new RegExp('.*(.{'+(nLen)+'})$');
  347.    return (sPad+sSrc).replace(re,'$1');
  348.   } // end function fStrPadStr
  349.  } // end function fRndCor
  350.  
  351.  function fTest(sBgColor, sFgColor)
  352.  {
  353.   document.write
  354.   (
  355.    '<div style=" color:'+sFgColor
  356.    +'; background-color:'+sBgColor+'; font-size:18px;">补色测试, Complementary Color test.</div>'
  357.   );
  358.  } // end function fTest
  359. //]]>
  360. </script>
  361. </head>
  362. <body>
  363. </body>
  364. </html>
JavaScript调色器以及取互补色的算法思路
LENEL的砖篮
01-07 8127
最近用js做了个调色器, 功能和xp自带的调色器一样.似乎优快云博客不能跑JS,就发个干巴图上来,可以去alimama发布个广告位看看:).做这个的过程我主要的工作就是上网查寻了色彩模式HSB(有的地方叫HSL)和RGB的转换算法最终我找到了颜色方面的算法大全 http://www.easyrgb.com/math.php?MATH=M18#text18老外还是有一套,这
pythonrgb函数_Python是否有一个函数或公式可以找到rgb代码的互补色？
weixin_28567617的博客
01-29 556
下面是如何直接计算RGB颜色的补色。它给出的结果与使用colorsys的算法相同，如Iva Klass的答案所示，但在我的测试中，它大约快了50%。请注意，它适用于任何RGB方案，不管RGB组件是整数还是浮点(只要每个组件使用相同的范围！)。在函数hilo实现了一个简单的sorting network来对RGB组件进行排序。在# Sum of the min & max of (a, b,...
CSS RGB的补色/互补色
才子的博客
04-06 3251
RGB RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。 补色/互补色 r，g，b最大值都是255，所以要找一个颜色的补色形成色差就让**两个颜色的rgb各项值**加起来都等于==255== ...
【PS】RGB互补色理论+色相理论
lsj1345714539566的博客
03-18 2611
下面这张图，每个颜色的对面就是它的互补色，也就是说，增加某个颜色的色阶，图片就会越显示它的颜色，越降低某个颜色的色阶，图片就会越显示它互补色的颜色。RGB十二色相环：每一个颜色的过渡阶梯为30（色相）这三种颜色有分别有0~255的色阶等级。
RGB的颜色本质
qq_27278957的博客
07-30 3752
1、相加混色 RGB是色度的三种基色，三种基色是相互独立的，任何一种基色都不能有其它两种颜色合成。这三种颜色合成的颜色范围最为广泛,按照不同的比例相加合成混色称为相加混色。 　　红色+绿色=黄色 　　绿色+蓝色=青色 　　红色+蓝色=品红 　　红色+绿色+蓝色=白色 黄色、青色、品红都是由两种基色相混合而成，所以它们又称相加二次色。 2、互补色 　　红色+青色=白色 　　绿色+品红=白色 　　蓝色+黄色=白色 所以青色、黄色、品红分别又是红色、蓝色、绿色的补色。由于每个人的眼睛对于相同
Js 实现十六进制颜色值和RGB颜色值转换整理，百度、阿里、滴滴、新浪的面试心经总结
m0_62261166的博客
03-20 624
hexToRgb: function (val) { //HEX十六进制颜色值转换为RGB(A)颜色值。(img-vCPH4OuD-1710882991573)]// 如果只有三位的值，需变成六位，如：#fff => #ffffff。return { hex: ‘无效’, alpha: 100 };// 处理六位的颜色值，转为RGB。result = ‘无效’;// 16进制颜色值的正则。// 把颜色值变成小写。
JS随机生成颜色的几种极简代码
weixin_44002929的博客
08-05 3134
实现一： 网上好多朋友们分享的随机色，都是先创建一个16位字符串，比较繁琐。运用下方代码简洁许多。 function col(){ var str="#" for(var i=0;i<6;i++){ str+=Math.floor(Math.random()*16).toString(16); } console.log(str); } co.
颜色那点事
我的学生时代
03-20 1285
颜色的16进制表示法和RGB表示有什么联系？ 带透明度属性的16进制颜色细节。 对比色和互补色细节。 如何计算对比色和互补色。
Javascript 10进制转16进制补0 ,16进制转10进制
qq_36722349的博客
09-17 3673
Javascript 10进制转16进制补0 ,16进制转10进制Javascript 10进制转16进制补0 ,16进制转10进制10进制转16进制补016进制转10进制 Javascript 10进制转16进制补0 ,16进制转10进制 10进制转16进制补0 // 10进制转16进制补0 function dec2hex(dec, len) {//10进制转16进制补0 var hex = ""; while( dec ) { var last = dec &amp
js将十六进制颜色转rgb以及加深减淡颜色值
chensong8331的博客
02-28 5865
十六进制颜色值转rgb JavaScript颜色转换的核心就是进制间的转换。RGB格式其实就是十进制表示法，所以，十六进制颜色与RGB颜色的转换就是十六进制与十进制之间的转换。 十六进制转换为十进制相对容易些，核心代码如下示例：parseInt(“0xFF”)，其结果就是255，”0x”就表明当前是16进制，由于parseInt后面无参数，默认就是转换为10进制了。 十进制转换为16进制，核心代码...
hadoop面试真实
okbin1991的博客
10-19 966
一、来自****提供的面试题(14** 道)： 第一题：1.创建 hadoop 帐户。 2.setup.改 IP。 3.安装 java，并修改/etc/profile 文件，配置 java 的环境变量。 4.修改 Host 文件域名。 5.安装 SSH，配置无密钥通信。 6.解压 hadoop。 7.配置 conf 文件下 hadoop-env.sh、core-site.sh、map...
python信息安全工具之端口扫描器_222994com，2024年最新颠覆认知
最新发布
2401_84419309的博客
04-17 9348
在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。需要完整版PDF学习资源私我。
JavaScript分类显示随机颜色【红绿蓝青黄紫、黑白、全彩】
飛天网事
12-29 6373
 JavaScript分类显示随机颜色【红绿蓝青黄紫、黑白、全彩】，随机显示分类颜色，按color系列显示随机颜色。 web中颜色的表达方法可以用内定的英文单词或颜色代码，其中颜色代码一般分两种形式：#ffffff  或 rgba(255,255,255,1) 其中#ffffff代码，6位16进制数字，每两位数字分别代表R（红色）、G（绿色）、B（蓝色）， 如#ff0000(红色）、#
RGB彩色空间的不同转换公式
林建华的专栏
08-30 4327
在做图像处理时，我们一般采用的是RGB空间，但是在某些特殊情况下，我们也会用到其他的颜色空间。本文主要介绍一些常见的颜色空间的概念和转换公式。颜色的实质是一种光波。它的存在是因为有三个实体：光线、被观察的对象以及观察者。人眼是把颜色当作由被观察对象吸收或者反射不同波长的光波形成的。例如，当在一个晴朗的日子里，我们看到阳光下的某物体呈现红色时，那是因为该物体吸收了其它波长的光，而把红色波长的光反射到
Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。
qq_41076441的博客
11-19 1万+
Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。 **应用场景：**在很多时候，前端开发过程中需要动态的获取图片的主要的颜色值，并根据主色调去调整主题样式的颜色或者模拟出一套配色方案，如图 根据png图片颜色，动态设置背景颜色或者文字颜色，使其提高对比度提高内容的可读性。 根据图片，模拟出一套主题配色方案。 实现及原理：以canvas的getImageData(...
hsi和rgb的转换，以及hsi和rgb的补色变换 matlab代码
ai359005521的博客
05-15 4067
版权声明：<–本博客所有内容均为自己在学习工作中的总结、摘录等-- --转载请注明出处-- --如有侵权请联系删除–> https://blog.csdn.net/ai359005521/article/details/85068305 如果有用的话帮忙点个赞就好 rgb转为hsi的代码 function hsi = RGB2HSI(rgb) rgb = im2double(rgb)...
十六进制颜色对照表
weixin_33929309的博客
06-24 899
十六进制颜色值的含义与定义方法 在很多软件中，都会遇到设定颜色值的问题，初学者往往不理解颜色是如何与一串数字和字母对应的。这里我们就来简单介绍一下。 人的眼睛看到的颜色有两种： 1. 一种是发光体发出的颜色，比如计算机显示器屏幕显示的颜色； 2. 另一种是物体本身不发光，而是反射的光产生的颜色，比如看报纸和杂志上的颜色。 我们又知道任何颜色都是由三种最...
【数字图像处理一】RGB模型转化为HSI模型的几何方法推导
gongyi_yf的博客
03-24 1万+
本文基于《数字图像处理》（冈萨雷斯第三版）的原网站的证明并添加了一点自己的理解，如果想要获取作者的证明原始文件请访问这里。 RGB转换到HSI的几何方法公式 假设RGB模型的R,G,BR,G,BR,G,B值的取值范围为[0,1][0,1][0,1]。 HSI模型的三个分量：强度(III)，色调(HHH)，饱和度(SSS)的计算公式如下： I=13(R+G+B)I=13(R+G+B)I=...
RGB与HSB之间的转换公式
热门推荐
xhhjin的专栏
11-28 6万+
先来了解一些概念： 1.RGB是一种加色模型,就是将不同比例的Red/Green/Blue混合在一起得到新颜色.通常RGB颜色模型表示为: 2.HSB(HSV) 通过色相/饱和度/亮度三要素来表达颜色.   H(Hue):表示颜色的类型(例如红色,绿色或者黄色).取值范围为0—360.其中每一个值代表一种颜色.   S(Saturation):颜色的饱和度.从0到1.有
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值