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

Question

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

我有代码这样做:

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

使用十六进制数学必须有一种更有效的方法才能知道颜色超出了一定的黑暗程度？就像lightcolor +"some hex value"<="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是最亮的.大于128的值被认为是轻微的tinycolor.(从@ pau.moreno和@Alnitak的评论中无耻地复制)

Answer 2

该TinyColor库(你已经提到它)提供了用于检查和操纵的色彩,其中几个功能:

• getBrightness

  返回颜色的感知亮度,范围为0-255,由Web内容可访问性指南(版本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内容可访问性指南(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

你可以计算亮度:

因此,亮度是表面亮度的指标.

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

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

1. 取R,G和B的最大值.
2. 取R,G和B的最大值和最小值的平均值.
3. 取三者的平均值.
4. 使用一些加权平均值,如其他人在此处所建议

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