Skip to content

Instantly share code, notes, and snippets.

@emersonbroga

emersonbroga/index.html

Last active October 3, 2016 04:01
Show Gist options
  • Save emersonbroga/0b4ed14474cea2e56bfc13cfa1bae006 to your computer and use it in GitHub Desktop.
Save emersonbroga/0b4ed14474cea2e56bfc13cfa1bae006 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Color Shades Generator
Raw
index.html
<!---
DEMO: http://s3.emerson.link/prints/color-shades-generator.html
Source: https://gist.github.com/emersonbroga/0b4ed14474cea2e56bfc13cfa1bae006
-->
<!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>Color Shades Generator</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<style type="text/css">
.color-sample{
clear: both;
float: left;
}
.block{
float:left;
width: 22px;
height: 122px;
}
.block span {
font-family: "Lucida Console", Monaco, monospace;
background-color: #e2e2e2;
transform: rotate(90deg);
transform-origin: left bottom 0;
color: #317092;
padding: 0 3px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="color-sample" data-color="#B108B2" data-dir="down" data-step="10"></div>
<div class="color-sample" data-color="#0008FF" data-dir="down" data-step="10"></div>
<div class="color-sample" data-color="#FFF416" data-dir="down" data-step="10"></div>
<div class="color-sample" data-color="#1BB200" data-dir="down" data-step="10"></div>
<div class="color-sample" data-color="#ff0000" data-dir="down" data-step="10"></div>
<div class="col-md-12">
<hr/>
<p><a class="btn btn-default" href="https://gist.github.com/emersonbroga/0b4ed14474cea2e56bfc13cfa1bae006">Source Code</a></p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script type="text/javascript">
function hexdec(hexString){
hexString = (hexString + '').replace(/[^a-f0-9]/gi, '');
return parseInt(hexString, 16);
}
function hex2rgb(hex) {
hex = hex.replace('#', '');
if(hex.length == 3) {
var r = hexdec( hex.substr(0,1) + hex.substr(0,1) );
var g = hexdec( hex.substr(1,1) + hex.substr(1,1) );
var b = hexdec( hex.substr(2,1) + hex.substr(2,1) );
} else {
var r = hexdec( hex.substr(0,2) );
var g = hexdec( hex.substr(2,2) );
var b = hexdec( hex.substr(4,2) );
}
var rgb = [r,g,b];
return rgb;
}
function compareArrays(arr1, arr2){
return (JSON.stringify(arr1) === JSON.stringify(arr2));
}
function hex2rgbTest() {
var result = null;
result = ( compareArrays(hex2rgb('#FFFFFF'), [255, 255, 255])) ? 'VALID' : 'INVALID';
console.log(result);
result = ( compareArrays(hex2rgb('FFFFFF'), [255, 255, 255])) ? 'VALID' : 'INVALID';
console.log(result);
result = ( compareArrays(hex2rgb('#FFF'), [255, 255, 255])) ? 'VALID' : 'INVALID';
console.log(result);
result = ( compareArrays(hex2rgb('FFF'), [255, 255, 255])) ? 'VALID' : 'INVALID';
console.log(result);
result = ( compareArrays(hex2rgb('fff'), [255, 255, 255])) ? 'VALID' : 'INVALID';
console.log(result);
result = ( compareArrays(hex2rgb('#000000'), [0, 0, 0])) ? 'VALID' : 'INVALID';
console.log(result);
result = ( compareArrays(hex2rgb('000000'), [0, 0, 0])) ? 'VALID' : 'INVALID';
console.log(result);
result = ( compareArrays(hex2rgb('#000'), [0, 0, 0])) ? 'VALID' : 'INVALID';
console.log(result);
result = ( compareArrays(hex2rgb('000'), [0, 0, 0])) ? 'VALID' : 'INVALID';
console.log(result);
}
hex2rgbTest();
function dechex(number)
{
if (number < 0)
{
number = 0xFFFFFFFF + number + 1;
}
return number.toString(16).toUpperCase();
}
function rgb2hex(rgb) {
var hex = "#";
var r = dechex(rgb[0]);
var g = dechex(rgb[1]);
var b = dechex(rgb[2]);
hex += (r.length === 1) ? '0' + r : r;
hex += (g.length === 1) ? '0' + g : g;
hex += (b.length === 1) ? '0' + b : b;
return hex;
}
function rgb2hexTest() {
var result = null;
result = (rgb2hex([255, 255, 255]) === '#FFFFFF') ? 'VALID': 'INVALID';
console.log(result);
result = (rgb2hex([0, 0, 0]) === '#000000') ? 'VALID': 'INVALID';
console.log(result);
}
rgb2hexTest();
function hexShades(hexColor, level, dir) {
level = (level) ? level : 5;
rgb = hex2rgb(hexColor);
if (['up','down'].indexOf(dir) === -1) {
dir = 'down';
}
if (dir === 'up') {
rgb[0] = (rgb[0] > level) ? (rgb[0] + level) : rgb[0];
rgb[1] = (rgb[1] > level) ? (rgb[1] + level) : rgb[1];
rgb[2] = (rgb[2] > level) ? (rgb[2] + level) : rgb[2];
} else {
rgb[0] = (rgb[0] > level) ? (rgb[0] - level) : rgb[0];
rgb[1] = (rgb[1] > level) ? (rgb[1] - level) : rgb[1];
rgb[2] = (rgb[2] > level) ? (rgb[2] - level) : rgb[2];
}
rgb[0] = (rgb[0] < 0) ? 0 : rgb[0];
rgb[1] = (rgb[1] < 0) ? 0 : rgb[1];
rgb[2] = (rgb[2] < 0) ? 0 : rgb[2];
rgb[0] = (rgb[0] > 255) ? 255 : rgb[0];
rgb[1] = (rgb[1] > 255) ? 255 : rgb[1];
rgb[2] = (rgb[2] > 255) ? 255 : rgb[2];
var hex = rgb2hex(rgb);
return hex;
}
$(document).ready(function(){
$('.color-sample').each(function(){
var $this = $(this);
var color = $this.attr('data-color');
var dir = $this.attr('data-dir') || 'up';
var step = $this.attr('data-step') || 5;
for (var i=0; i < 16; i++) {
setTimeout( function() {
color = (i===0) ? color : hexShades(color,step, dir);
$this.append('<div class="block" style="background-color: ' + color + '"><span>' + color + '</span></div>');
}, 100 * i );
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment