Skip to content

Instantly share code, notes, and snippets.

@montanaflynn
Last active February 27, 2016 04:41
Show Gist options
  • Save montanaflynn/f3f99eed830e46b7ea19 to your computer and use it in GitHub Desktop.
Save montanaflynn/f3f99eed830e46b7ea19 to your computer and use it in GitHub Desktop.
GitHub language color generator - http://goo.gl/fyj3hk
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdn.rawgit.com/jeremyfa/yaml.js/develop/dist/yaml.min.js"></script>
<script src="https://cdn.rawgit.com/Fooidge/PleaseJS/master/dist/Please.js"></script>
<meta charset="utf-8">
<style>
a {
font: 16px sans-serif;
color: blue;
text-decoration:none;
text-align: center;
display: block;
padding: 20px;
}
div {
font: 16px sans-serif;
color: white;
text-align: center;
padding: 10px;
}
</style>
<script>
var languages = "https://cdn.rawgit.com/github/linguist/master/lib/linguist/languages.yml";
$(document).ready(function(){
$.get( languages, function( data ) {
languages = YAML.parse(data);
generateColors();
});
})
function generateColors(){
$(".generate").text("Regenerate GitHub Language Colors");
$('.generate').on('click', generateColors);
$("div").remove();
for (var lang in languages) {
if (!languages[lang].color) {
var color = Please.make_color({
format:"hex",
golden:false,
hue: random_int(1,360),
saturation: random_float( 0.01, 0.6 ),
value: random_float( 0.3, 0.7 )
});
$( "body" )
.append( "<div style='background:"+color+";'>"+lang+"</div>" );
}
}
}
function random_int( min, max ){
return Math.floor( Math.random() * ( max - min + 1 )) + min;
}
function random_float( min, max ){
return Math.random() * ( max - min ) + min;
}
</script>
</head>
<body>
<a href="#" class="generate">Generate GitHub Language Colors</a>
</body>
</html>
@montanaflynn
Copy link
Author

Was building a visualization with GitHub data and found that many languages do not have a color specified. So I built it this first in node to scratch my own itch and then made this quick demo just for you:

GitHub Language Color Demo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment