Determine if an elements background color is light or dark!

README

Step 1: Include the script wherever you please.

Step 2: $('#box').lightOrDark();

Step 3: ????

Step 4: PROFIT


(Note: It depends on jQuery, but I dont see why it wouldn't work with zepto. Feel free to port it to other frameworks too!!!1!!)

LICENSE.txt

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2015 Larry Fox <http://larryfox.us>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  0. You just DO WHAT THE FUCK YOU WANT TO.

lightordark.js

// Determine if the background color of an element is light or dark.
(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) {
      this.addClass('light');
    } else {
      this.addClass('dark');
    }
  }
  
})(jQuery);

blue and green are switched.

@cleblanc87 THANK YOU. Was trying to figure out why I was getting such bizarre results from this.

The order is: r, g, b - it matters.

95249F -> light

is it correct?

5555dd

too...

For the lazy it should be:

      r = a >> 16;
      g = a >> 8 & 255;
      b = a & 255;

and not:

      r = a >> 16;
      b = a >> 8 & 255;
      g = a & 255;