Question

我得到了JsonSerialize的颜色和背景颜色的计算HEX，如下所示：

body

我需要选择其中一种颜色作为白色背景上的文字颜色。但是，当页面背景较暗且颜色为浅白色时会出现问题。因此，我需要智能地选择其中一个作为文本颜色。

如何找出function rgb2hex(rgb){ rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); return (rgb && rgb.length === 4) ? "#" + ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : ''; } var color = rgb2hex(window.getComputedStyle(document.getElementsByTagName("body")[0]).color); var bg = rgb2hex(window.getComputedStyle(document.getElementsByTagName("body")[0]).backgroundColor);和color中距离bg最远的哪一个？

Answer 1

您需要计算两种颜色的relative luminance。亮度较低的颜色，将是白色的一个。此计算公式在链接文章和我的代码中提供：

＆＃13;

{
    const getRGBLuminance = (string) => {
        const rgb = string.replace(/[^\d ]/g, '').split(' ');
        return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
    }

    const bodyStyle        = window.getComputedStyle(document.body),
          colorLuminance   = getRGBLuminance(bodyStyle.color),
          bgColorLuminance = getRGBLuminance(bodyStyle.backgroundColor);

    if (colorLuminance < bgColorLuminance) {
        console.log('Text color is further from #FFF.');
    }
    else if (colorLuminance > bgColorLuminance) {
        console.log('Background color is further from #FFF.');
    }
    else {
        console.log('Both color and background color are equally far from #FFF.');
    }
}

＆＃13;

/* Only for demonstration */
body {
  background-color: #ACE;
  color: #000;
}

＆＃13;

选择远离白色的颜色

1 个答案: