如何检查十六进制颜色是否为“太黑”？

我正在尝试评估颜色选择器选择的颜色的暗度，以查看它是否“过黑”，如果是，请将其设置为白色。我以为可以使用十六进制值的第一个字符来完成此操作。它正在工作，但是它也在切换某些合法的“浅色”颜色。

我有这样做的代码：

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

十六进制数学中必须有一种更有效的方法来知道一种颜色已经超出了一定的黑暗度？就像如果lightcolor +“某些十六进制值” <=“某些十六进制值”，那么将其设置为白色。

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

您必须分别提取三个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的评论中无耻地复制）

该TinyColor库（你已经提到它）提供了用于检查和操纵的色彩，其中几个功能：

• getBrightness

  根据Web内容可访问性指南（1.0版）定义，返回从0到255的颜色的感知亮度。

  tinycolor("#fff").getBrightness(); // 255

• isLight

  返回一个布尔值，指示颜色的感知亮度是否为浅色。

  tinycolor("#fff").isLight(); // true
  tinycolor("#000").isLight(); // false

• isDark

  返回一个布尔值，指示颜色的感知亮度是否为暗。

  tinycolor("#fff").isDark(); // false
  tinycolor("#000").isDark(); // true

• getLuminance

  根据Web内容可访问性指南（2.0版）的定义，从0-1返回颜色的感知亮度。

  tinycolor("#fff").getLuminance(); // 1

我找到了这个WooCommerce Wordpress PHP函数（wc_hex_is_light），然后转换为JavaScript。工作良好！

function wc_hex_is_light(color) {
    const hex = color.replace('#', '');
    const c_r = parseInt(hex.substr(0, 2), 16);
    const c_g = parseInt(hex.substr(2, 2), 16);
    const c_b = parseInt(hex.substr(4, 2), 16);
    const brightness = ((c_r * 299) + (c_g * 587) + (c_b * 114)) / 1000;
    return brightness > 155;
}

您可以计算亮度：

因此，亮度是表面会显得有多亮的指示。

因此，最好选择文本是白色还是黑色。

var getRGB = function(b){
    var a;
    if(b&&b.constructor==Array&&b.length==3)return b;
    if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b))return[parseInt(a[1]),parseInt(a[2]),parseInt(a[3])];
    if(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b))return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55];
    if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b))return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],
16)];
    if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b))return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)];
    return (typeof (colors) != "undefined")?colors[jQuery.trim(b).toLowerCase()]:null
};

var luminance_get = function(color) {
    var rgb = getRGB(color);
    if (!rgb) return null;
        return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
}

上面的方法允许您以不同的格式传递颜色，但是算法基本上只在中luminance_get。

使用它时，如果亮度大于180，则将颜色设置为黑色，否则将其设置为白色。

亮度和亮度之间存在重要区别。归根结底，亮度是对能量在某个区域中传播的度量，它完全忽略了我们的感知系统如何感知该能量。另一方面，亮度是衡量我们如何感知能量并考虑亮度和我们的感知系统之间关系的一种量度。（作为一个混淆点，有一个称为相对亮度的术语，它似乎与亮度术语同义。它使我兴奋不已）。

准确地说，您正在寻找其他人建议的“亮度”或“值”或“相对亮度”。您可以通过几种不同的方式（例如人类！）来计算此值。http://en.wikipedia.org/wiki/HSL_and_HSV#Lightness

1. 取R，G和B的最大值。
2. 取R，G和B中最大值和最小值的平均值。
3. 取三者的平均值。
4. 使用其他一些建议的加权平均值。

十六进制工作，例如#fefefe

function isTooDark(hexcolor){
    var r = parseInt(hexcolor.substr(1,2),16);
    var g = parseInt(hexcolor.substr(3,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    // Return new color if to dark, else return the original
    return (yiq < 40) ? '#2980b9' : hexcolor;
}

您可以将其更改为退货true或false更改

return (yiq < 40) ? '#2980b9' : hexcolor;

至

return (yiq < 40);

一种可能的解决方案是将颜色从RGB转换为HSB。HSB代表色相，饱和度和亮度（也称为HSV，其中V代表值）。然后，您只需检查一个参数：亮度。

我知道这次对话已经有几年历史了，但仍然很有意义。我想补充一点，我的团队在Java（SWT）中也遇到了同样的问题，并且发现这更加准确：

private Color getFontColor(RGB bgColor) {
    Color COLOR_BLACK = new Color(Display.getDefault(), 0, 0, 0);
    Color COLOR_WHITE = new Color(Display.getDefault(), 255, 255, 255);

    double luminance = Math.sqrt(0.241 
       * Math.pow(bgColor.red, 2) + 0.691 * Math.pow(bgColor.green, 2) +  0.068 
       * Math.pow(bgColor.blue, 2));
    if (luminance >= 130) {
        return COLOR_BLACK;
    } else {
        return COLOR_WHITE;
    }
}