javascript - 选择远离白色的颜色

Question

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

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 中哪一个距离 #fff 最远？

Answer 1

你需要计算relative luminance两种颜色。亮度较低的颜色将是距离白色较远的颜色。链接文章和我的以下代码中提供了此计算公式:

{
    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.');
    }
}

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