-
-
Save rdela/3034829 to your computer and use it in GitHub Desktop.
Determine if an elements background color is light or dark!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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!!) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
Version 2, December 2004 | |
Copyright (C) 2012 Larry Fox <http://la.rryfox.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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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]; | |
b = a[2]; | |
g = 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Determine if the background color of an element is light or dark. | |
(function(d){d.fn.lightOrDark=function(){var b,c,a;a=this.css("background-color");a.match(/^rgb/)?(a=a.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/),b=a[1],c=a[2],a=a[3]):(a=+("0x"+a.slice(1).replace(5>a.length&&/./g,"$&$&")),b=a>>16,c=a>>8&255,a&=255);127.5<Math.sqrt(0.299*b*b+0.587*a*a+0.114*c*c)?this.addClass("light"):this.addClass("dark")}})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment