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

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

我有这样的代码：

        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加权因子。

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

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

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

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

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

你可以计算亮度：

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

所以选择文本应该是白色还是黑色是很好的选择。

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

上一篇: How to check if hex color is "too black"?

下一篇: Fonts only black and white