怎样才能发现两种颜色是否相似呢？

Question

我想改变文字和正文的背景。我正在生成4种不同的颜色，其中两种用于主体的背景渐变，而另外两种用于文本。

我使用以下代码计算一个随机的HEX值。

  newbg1 = "#" + (Math.random()*0xFFFFFF<<0).toString(16);
  newbg2 = "#" + (Math.random()*0xFFFFFF<<0).toString(16);
  newbgtext1 = "#" + (Math.random()*0xFFFFFF<<0).toString(16);
  newbgtext2 = "#" + (Math.random()*0xFFFFFF<<0).toString(16);

(我为这里没有合理的变量名称而道歉)

在这之后，我执行以下检查，以确保这些代码确实是完整的6位HEX代码，前面有 "#"。

if(newbg1.length<7 || newbg2.length<7||newbgtext1.length<7||newbgtext2.length<7)
    onclick();

如果任何一个生成的代码不符合这些长度，我就调用函数本身来生成新的十六进制代码。

然而，这时我遇到了一个问题。虽然代码是随机生成的，但很多时候看起来渐变并不存在，它是一种纯色。我以为这是因为选择了相同的颜色（可能性很小，但不是不可能）。

因此我又添加了一个if语句来检查颜色是否相同。

if(newbg1 == newbg2 || newbgtext2==newbgtext1 || newbg1 == newbgtext1 || newbg1 == newbgtext2 || newbg2 += newbgtext1 || newbg2 == newbgtext2)
     onclick();

但这仍然不能解决这个问题。在经过一些跟踪和错误后，我得出的结论是，颜色是 类似 而非 一样.

我需要一种方法来识别两个给定的十六进制值是否相似，以及它们相似的程度。我还想知道两个十六进制颜色的最小差值是多少，以便获得可辨别的渐变。

我还将在下面添加完整的JS代码。

var bg = document.getElementById("bg");
var inv = document.getElementById("inv");
var textbg = document.getElementById("textbg");

inv.style.opacity="0";
document.body.addEventListener("click", onclick);

function onclick() {
  newbg1 = "#" + (Math.random()*0xFFFFFF<<0).toString(16);
  newbg2 = "#" + (Math.random()*0xFFFFFF<<0).toString(16);
  newbgtext1 = "#" + (Math.random()*0xFFFFFF<<0).toString(16);
  newbgtext2 = "#" + (Math.random()*0xFFFFFF<<0).toString(16);

  if(newbg1.length<7 || newbg2.length<7||newbgtext1.length<7||newbgtext2.length<7)
    onclick();
  if(newbg1 == newbg2 || newbgtext2==newbgtext1 || newbg1 == newbgtext1 || newbg1 == newbgtext2 || newbg2 == newbgtext1 || newbg2 == newbgtext2)
    onclick();

  inv.style.opacity="1";
  setTimeout(function() {
    bg.style.background = "linear-gradient(-45deg," + newbg1 +"," + newbg2 + ")";
    inv.style.opacity="0";
    bg.style.backgroundSize = "200% 200%";
    bg.style.backgroundRepeat = "no-repeat";
    textbg.style.background = "linear-gradient(-45deg," + newbgtext1 +"," + newbgtext2 + "," + newbgtext1 + ")";
    textbg.style.backgroundSize = "200% 200%";
    textbg.style.backgroundRepeat = "no-repeat";
    textbg.style.webkitBackgroundClip = "text";
    textbg.style.webkitTextFillColor= "transparent";
  }, 500);

}

Answer 1

首先，你应该使用 .padStart 函数，对于给定数字较小的情况（用前导零填充），像这样。

 newbg1 = "#"  + (Math.random()*0xFFFFFF<<0).toString(16).padStart(6, '0');

关于相似性检查 - 你可以得到以下函数 RGB 如果它大于某个定义值--不相似，否则--相似。

就像这样。

(在下面的例子中，总的颜色变化是50，但可以用它来计算)

function getRGB(color) {
  color = parseInt(color.substring(1), 16);
  r = color >> 16;
  g = (color - (r<<16)) >> 8;
  b = color - (r<<16) - (g<<8);
  return [r, g, b];
}
function isSimilar([r1, g1, b1], [r2, g2, b2]) {
  return Math.abs(r1-r2)+Math.abs(g1-g2)+Math.abs(b1-b2) < 50;
}

console.log(isSimilar(getRGB('#ffffff'), getRGB('#000000'))) // white and black
console.log(isSimilar(getRGB('#f10103'), getRGB('#fa1012'))) // to kinds of red