且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-11-25 23:22:52

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

You have to extract the three RGB components individually, and then use a standard formula to convert the resulting RGB values into their perceived brightness.

假设有六个字符的颜色:

Assuming a six character colour:

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

Since May 2014 tinycolor now has a getBrightness() function, albeit using the CCIR601 weighting factors instead of the ITU-R ones above.

编辑

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

The resulting luma value range is 0..255, where 0 is the darkest and 255 is the lightest. Values greater than 128 are considered light by tinycolor. (shamelessly copied from the comments by @pau.moreno and @Alnitak)