Pick color that's further away from white

Question

I'm getting the computed HEX of the color and background color of body like so:

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

I need to pick one of these colors to be used as a text color on a white background. However, a problem occurs when the page background is dark and the color is light/white. Therefore, I need to intelligently pick one of these to be used as the text color.

How can I find out which one of color and bg is furthest away from #fff?

Furthest away in what sense? You want to select the most-contrasting colour? — byxor, Apr 04 '17 at 17:20
That's exactly correct. Which one of those two colors is most visually suitable to be used as the text `color` when `background: #fff;` — Emphram Stavanger, Apr 04 '17 at 17:21
Would using CSS invert property ( https://davidwalsh.name/invert-colors-css ) do what you want? It you want a javascript function it is a matter of figuring out how to do the inversion in javascript. Something like this: http://stackoverflow.com/questions/6961725/algorithm-for-calculating-inverse-color — zelite, Apr 04 '17 at 17:21
Possible duplicate of [Formula to determine brightness of RGB color](http://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color) — ibrahim mahrir, Apr 04 '17 at 17:22
Using the formula in the link `0.2126*R + 0.7152*G + 0.0722*B` to calculate the luminance of both colors and then pick the one with the smallest luminance (the darkest of both or as you said _the furthest from white_)! — ibrahim mahrir, Apr 04 '17 at 17:24

Przemek · Answer 1 · 2017-04-04T17:59:42.137

You need to calculate relative luminance of both colors. Color with the lower luminance, will be the one further from white. Formula for this calculation is provided in the linked article and in my code below:

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

Pick color that's further away from white

1 Answers1