Skip to content

Instantly share code, notes, and snippets.

@KaduNovoK

KaduNovoK/colors.html

Last active August 29, 2015 14:02
Show Gist options
  • Save KaduNovoK/c3b012c04e54b8e12b3c to your computer and use it in GitHub Desktop.
Save KaduNovoK/c3b012c04e54b8e12b3c to your computer and use it in GitHub Desktop.
Download ZIP
html + js to generate a color variations
Raw
colors.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Colors</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1 id="colors-h1">Colors</h1>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" id="color-input">
<span class="input-group-btn">
<button id="clear" class="btn btn-default" type="button">Clear!</button>
<button id="go" class="btn btn-primary" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="colors hide">
<div class="brightness">
<h2>Brightness</h2>
<div class="brightness-content"></div>
</div><div class="clearfix"></div>
<div class="shadow">
<h2>Shadow</h2>
<div class="shadow-content"></div>
</div><div class="clearfix"></div>
<div class="hue">
<h2>Hue</h2>
<div class="hue-content"></div>
</div><div class="clearfix"></div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(function(){
var generateColors = function() {
$('.colors').removeClass('hide');
var color = $('#color-input').val();
if (color) {
$('#colors-h1').append(' ( '+color+' )');
}
for (var i = 100; i >= 0; i--) {
if (i % 5 == 0) {
var colorBrightnessDiv = '<div style="background:#'+color+' url(\'./white/white_'+i+'.png\') repeat; width: 50px; height: 50px; margin-right: 10px; float:left ">'+i+'%'+'</div>';
$('.brightness-content').append(colorBrightnessDiv);
var colorShadowDiv = '<div style="background:#'+color+' url(\'./black/black_'+i+'.png\') repeat; width: 50px; height: 50px; margin-right: 10px; float:left ">'+i+'%'+'</div>';
$('.shadow-content').append(colorShadowDiv);
var colorHueDiv = '<div style="background:#'+color+' url(\'./gray/gray_'+i+'.png\') repeat; width: 50px; height: 50px; margin-right: 10px; float:left ">'+i+'%'+'</div>';
$('.hue-content').append(colorHueDiv);
}
};
}
$('#go').on('click', generateColors);
var clearColors = function() {
$('#colors-h1').html('Colors');
$('.brightness-content').empty();
$('.shadow-content').empty();
$('.hue-content').empty();
$('.colors').addClass('hide');
}
$('#clear').on('click', clearColors);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment