How to set the font color between black and white, depending on the color of the background

Question

I have a array(dynamic values) with hex colors and I want put the font color black for the light backgrounds and color White for the dark backgrounds

        /* array for example */
        var colorHexCode = ["#ECECEC", "#FFF", "#F4F2ED"];
        for (var i = 0; i < colorHexCode.length; i++) {
            var ColorLayerDiv = document.createElement("div");
            ColorLayerDiv.style.height = "10px";
            ColorLayerDiv.style.backgroundColor = colorHexCode[i];
            $('#Layers').append(ColorLayerDiv);
        }

I want set the font color automatic like this:

Is it possible to do this using js or query? if yes can you show me an example

This may help you [Given a RGB color x, how to find the most contrasting color y?](http://gamedev.stackexchange.com/a/38542) — jcubic, May 31 '16 at 07:36
This question might be exactly what you want. http://stackoverflow.com/questions/11867545/change-text-color-based-on-brightness-of-the-covered-background-area Cyang points to this article https://24ways.org/2010/calculating-color-contrast — Philipp Lehmann, May 31 '16 at 07:38
[JS function for accessible color contrast](http://codepen.io/davidhalford/pen/ywEva) — jcubic, May 31 '16 at 07:39
I don't see this as a duplicate. I think he has a predefined set of colors which he wants to hardcode into his application. He nowhere mentions 'detect' or whatever. The other solutions are most probably way more complex than what he needs. @HudsonPH: I put the code I wanted to post as answer on github, check https://gist.github.com/mdix/96d8743fe0ee1a9abe8d7843009d92c0. — Marc Dix, May 31 '16 at 07:40
jcubic and MarcDix thanks :D , @Rayon I dont want a PHP solution read the thing for complete before do this — HudsonPH, May 31 '16 at 07:46
@MarcDix I will use the solution of jcubic, need to be dynamic :P — HudsonPH, May 31 '16 at 07:55

score 2 · Accepted Answer · answered May 31 '16 at 07:57

Solution:

this piece of code, source: http://codepen.io/davidhalford/pen/ywEva ;

threshold = 130; /* about half of 256. Lower threshold equals more dark text on dark background  */

            hRed = hexToR(hex);
            hGreen = hexToG(hex);
            hBlue = hexToB(hex);


            function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
            function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
            function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
            function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

            cBrightness = ((hRed * 299) + (hGreen * 587) + (hBlue * 114)) / 1000;
              if (cBrightness > threshold){return "#000000";} else { return "#ffffff";} 
          }

thanks @jcubic

mene · Answer 2 · 2016-05-31T08:00:05.460

Here you find if your color i dark or light:

  (function ($) {

        $.fn.lightOrDark = function () {

        var r, b, g, hsp
          , a = this.css('background-color');

        if (a.match(/^rgb/)) {
            a = a.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
            r = a[1];
            g = a[2];
            b = a[3];
        } else {
            a = +("0x" + a.slice(1).replace( // thanks to jed : http://gist.github.com/983661
                a.length < 5 && /./g, '$&$&'
              )
            );
            r = a >> 16;
            b = a >> 8 & 255;
            g = a & 255;
        }
        hsp = Math.sqrt( // HSP equation from http://alienryderflex.com/hsp.html
          0.299 * (r * r) +
          0.587 * (g * g) +
          0.114 * (b * b)
        );
        if (hsp > 127.5) {
            alert('light');
        } else {
            alert('dark');
        }
    }

})(jQuery);

score 0 · Answer 3 · answered May 31 '16 at 08:07

You can process the colors and calculate the brightness.

var colorHexCode = ["#ECECEC", "#FFF", "#F4F2ED","#777", "#FF0", '#00F'];
        for (var i = 0; i < colorHexCode.length; i++) {
            var ColorLayerDiv = document.createElement("div");
            ColorLayerDiv.style.height = "20px";
            ColorLayerDiv.style.backgroundColor = colorHexCode[i];

            //text color
            var c = colorHexCode[i];
            var brightness = 0;
            for(var j = 1; j< c.length; ++j){
                    var rgb = c[j];
                if(c.length==4)            
                    rgb += rgb;
                else {
                    j+=1;
                  rgb += c[j];
                }  
                var b = parseInt(rgb, 16);
                brightness += b;
            }
            ColorLayerDiv.innerText = c;
            ColorLayerDiv.style.color = brightness >= (255*3/2) ? 'black' : 'white';

            $('#Layers').append(ColorLayerDiv);
        }

Thanks, but i forget to write need to be dynamic the values – HudsonPH May 31 '16 at 08:14 — HudsonPH, May 31 '16 at 08:14

How to set the font color between black and white, depending on the color of the background

3 Answers3