Skip to content

Instantly share code, notes, and snippets.

@theorm

theorm/gist:1897339

Created February 24, 2012 04:00
Show Gist options
  • Save theorm/1897339 to your computer and use it in GitHub Desktop.
Save theorm/1897339 to your computer and use it in GitHub Desktop.
Download ZIP
Generate colours in tone of the original.
Raw
gistfile1.html
<!DOCTYPE html>
<head>
</head>
<body>
<ul id="colours">
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// generate colours related to the 'mix' colour.
// inspired by http://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-jquery-javascript
var generateColour = function(mix) {
var red = Math.floor(Math.random() * 256);
var green = Math.floor(Math.random() * 256);
var blue = Math.floor(Math.random() * 256);
// mix the color
if (mix != null) {
red = Math.floor((red + parseInt(mix.substring(1,3),16)) / 2);
green = Math.floor((green + parseInt(mix.substring(3,5),16)) / 2);
blue = Math.floor((blue + parseInt(mix.substring(5,7),16)) / 2);
}
var colour = "#" + red.toString(16) + green.toString(16) + blue.toString(16)
return colour
};
var baseColour = "#ffffff";
for (var i=0;i<32;i++) {
var colour = generateColour(baseColour);
console.log(colour);
$('<li style="background-color:' + colour + ';">' + i + '</li>').appendTo($("#colours"));
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment