选择离白色更远的颜色

我得到了像这样的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离#fff最远？

---

你需要计算两种颜色的相对亮度。 较低亮度的颜色将是离白色更远的颜色。 这个计算公式在链接的文章和我的代码中提供：

{
    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;
}

链接地址: http://www.djcxy.com/p/87063.html

上一篇: Pick color that's further away from white

下一篇: How to pick a background color depending on font color to have proper contrast