Question

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

我有代码这样做：

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

对于十六进制数学必须有一种更有效的方法才能知道颜色超出了某个黑暗水平？如果lightcolor +“some hex value”＆lt; =“some hex value”，则将其设置为白色。

我添加了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是最亮的。 tinycolor认为大于128的值较轻。（从@ pau.moreno和@Alnitak的评论中无耻地复制）

Answer 2

TinyColor库（您已经提到它）提供了几种检查和操作颜色的功能，其中包括：

getBrightness
返回0到255之间的感知亮度，由Web Content Accessibility Guidelines (Version 1.0)定义。
```
tinycolor("#fff").getBrightness(); // 255
```

isLight

返回一个布尔值，指示颜色的感知亮度是否很轻。
tinycolor("#fff").isLight(); // true
tinycolor("#000").isLight(); // false

isDark

返回一个布尔值，指示颜色的感知亮度是否暗。
tinycolor("#fff").isDark(); // false
tinycolor("#000").isDark(); // true

getLuminance
返回颜色的感知亮度，由Web Content Accessibility Guidelines (Version 2.0)定义的0-1。
```
tinycolor("#fff").getLuminance(); // 1
```

Answer 3

我找到了这个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;
}

Answer 4

您可以计算luminance：

因此，亮度是表面亮度的指标。

因此，选择文本应该是白色还是黑色是很棒的。

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，我将颜色设置为黑色，否则为白色。

Answer 5

亮度和亮度之间存在重要区别。在一天结束时，亮度衡量的是能量通过某个区域的能量，并完全忽略了我们的感知系统如何感知能量。另一方面，亮度是衡量我们如何感知能量并衡量亮度与感知系统之间关系的指标。（作为一个混淆点，有一个称为相对亮度的术语，它似乎与亮度术语同义使用。它使我绊倒了。）

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

取R，G和B的最大值。
取R，G和B的最大值和最小值的平均值。
取三者的平均值。
使用其他人在此处建议的加权平均值。

Answer 6

这适用于十六进制，例如#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);

Answer 7

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

Answer 8

我意识到这个对话已经有几年了，但它仍然具有现实意义。我想补充一点，我的团队在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;
    }
}

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

8 个答案: