-
-
Save kenhkelly/1997b904a07f426c00aa to your computer and use it in GitHub Desktop.
// source http://jsbin.com/basayazizi
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
<style id="jsbin-css"> | |
body { font: bold medium monospace; } | |
.demolist { margin: 0; padding: 0; list-style-type: none; overflow: hidden; } | |
.demolist li { float: left; width: 5em; height: 5em; text-align: center; } | |
</style> | |
<ul class="demolist"> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
</ul> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
<script id="jsbin-javascript"> | |
function invertColor(hexTripletColor) { | |
var color = hexTripletColor; | |
color = color.substring(1); // remove # | |
color = parseInt(color, 16); // convert to integer | |
color = 0xFFFFFF ^ color; // invert three bytes | |
color = color.toString(16); // convert to hex | |
color = ("000000" + color).slice(-6); // pad with leading zeros | |
color = "#" + color; // prepend # | |
return color; | |
} | |
/* | |
* Demonstration | |
*/ | |
function randomColor() { | |
var color; | |
color = Math.floor(Math.random() * 0x1000000); // integer between 0x0 and 0xFFFFFF | |
color = color.toString(16); // convert to hex | |
color = ("000000" + color).slice(-6); // pad with leading zeros | |
color = "#" + color; // prepend # | |
return color; | |
} | |
$(function() { | |
$(".demolist li").each(function() { | |
var c1 = randomColor(); | |
var c2 = invertColor(c1); | |
$(this).text(c1 + " " + c2).css({ | |
"color": c1, | |
"background-color": c2 | |
}); | |
}); | |
}); | |
</script> | |
<script id="jsbin-source-css" type="text/css">body { font: bold medium monospace; } | |
.demolist { margin: 0; padding: 0; list-style-type: none; overflow: hidden; } | |
.demolist li { float: left; width: 5em; height: 5em; text-align: center; }</script> | |
<script id="jsbin-source-javascript" type="text/javascript">function invertColor(hexTripletColor) { | |
var color = hexTripletColor; | |
color = color.substring(1); // remove # | |
color = parseInt(color, 16); // convert to integer | |
color = 0xFFFFFF ^ color; // invert three bytes | |
color = color.toString(16); // convert to hex | |
color = ("000000" + color).slice(-6); // pad with leading zeros | |
color = "#" + color; // prepend # | |
return color; | |
} | |
/* | |
* Demonstration | |
*/ | |
function randomColor() { | |
var color; | |
color = Math.floor(Math.random() * 0x1000000); // integer between 0x0 and 0xFFFFFF | |
color = color.toString(16); // convert to hex | |
color = ("000000" + color).slice(-6); // pad with leading zeros | |
color = "#" + color; // prepend # | |
return color; | |
} | |
$(function() { | |
$(".demolist li").each(function() { | |
var c1 = randomColor(); | |
var c2 = invertColor(c1); | |
$(this).text(c1 + " " + c2).css({ | |
"color": c1, | |
"background-color": c2 | |
}); | |
}); | |
});</script> |
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
body { font: bold medium monospace; } | |
.demolist { margin: 0; padding: 0; list-style-type: none; overflow: hidden; } | |
.demolist li { float: left; width: 5em; height: 5em; text-align: center; } |
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
function invertColor(hexTripletColor) { | |
var color = hexTripletColor; | |
color = color.substring(1); // remove # | |
color = parseInt(color, 16); // convert to integer | |
color = 0xFFFFFF ^ color; // invert three bytes | |
color = color.toString(16); // convert to hex | |
color = ("000000" + color).slice(-6); // pad with leading zeros | |
color = "#" + color; // prepend # | |
return color; | |
} | |
/* | |
* Demonstration | |
*/ | |
function randomColor() { | |
var color; | |
color = Math.floor(Math.random() * 0x1000000); // integer between 0x0 and 0xFFFFFF | |
color = color.toString(16); // convert to hex | |
color = ("000000" + color).slice(-6); // pad with leading zeros | |
color = "#" + color; // prepend # | |
return color; | |
} | |
$(function() { | |
$(".demolist li").each(function() { | |
var c1 = randomColor(); | |
var c2 = invertColor(c1); | |
$(this).text(c1 + " " + c2).css({ | |
"color": c1, | |
"background-color": c2 | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment