javascript - 如何检查十六进制颜色是否为 "too black"？

Question

我正在尝试评估颜色选择器选择的颜色的暗度，看它是否“太黑”，如果是，则将其设置为白色。我想我可以使用十六进制值的第一个字符来实现这一点。它在工作，但它也在切换一些合法的“浅色”颜色。

我有以下代码:

if (lightcolor.substring(0, 3) == "#00" || lightcolor.substring(0, 3) == "#010") {
  lightcolor = "#FFFFFF";
  color = lightcolor;
}

必须有一种更有效的十六进制数学方法来知道颜色已经超过了一定的暗度？就像 lightcolor +“一些十六进制值”<= “一些十六进制值”，然后将其设置为 white .

我有tinyColor添加，这可能对此有用，但我不确定。

Answer 1

您必须分别提取三个 RGB 分量，然后使用标准公式将生成的 RGB 值转换为它们的感知亮度。

假设有六个字符的颜色:

var c = c.substring(1);      // strip #
var rgb = parseInt(c, 16);   // convert rrggbb to decimal
var r = (rgb >> 16) & 0xff;  // extract red
var g = (rgb >>  8) & 0xff;  // extract green
var b = (rgb >>  0) & 0xff;  // extract blue

var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709

if (luma < 40) {
    // pick a different colour
}

编辑

自 2014 年 5 月以来，tinycolor 现在有一个 getBrightness() 函数，尽管使用的是 CCIR601 加权因子而不是上面的 ITU-R。

编辑

得到的亮度值范围是 0..255，其中 0 是最暗的，255 是最亮的。大于 128 的值被 tinycolor 视为浅色。 (无耻地从@pau.moreno 和@Alnitak 的评论中复制)