Determine if an elements background color is light or dark!

mgibbs189

{{gist file=”LICENSE.txt” lang=”text”}}
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.
{{/gist}}{{gist file=”README” lang=””}}
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!!)
{{/gist}}{{gist file=”lightordark.js” lang=”javascript”}}
// 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);
{{/gist}}