我们如何判断两种颜色是否相似？

Question

所以我试图改变文本的背景和正文。我生成 4 种不同的颜色，其中两种用于主体的背景渐变，另两种用于文本。

我使用以下代码计算随机十六进制值：

  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 位十六进制代码，前面有一个“#”。

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();

但这仍然无法解决问题。经过一番尝试和错误后，我得出的结论是颜色相似但不相同。

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

我还将添加以下完整的 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，但可以尝试一下）

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