Skip to content

Instantly share code, notes, and snippets.

@wsams

wsams/color-palette-generator.html

Last active October 14, 2023 23:53
Show Gist options
  • Save wsams/3ad985aa5933ae8a7eb30a226085cc80 to your computer and use it in GitHub Desktop.
Save wsams/3ad985aa5933ae8a7eb30a226085cc80 to your computer and use it in GitHub Desktop.
Download ZIP
Generate a color palette using JavaScript and a web browser.
Raw
color-palette-generator.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Generate a color palette</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<style type="text/css">
body {
margin:64px;
}
.color {
width:10em;
height:10em;
margin:0;
padding:1em;
text-align:center;
float:left;
border-top:3px solid #404040;
border-bottom:3px solid #404040;
}
.color:first-child {
border-left:3px solid #404040;
}
.color:last-child {
border-right:3px solid #404040;
}
.form-control {
text-align:center;
}
.label {
background-color:#404040;
color:#ececec;
font-weight:normal;
letter-spacing:0.2em;
}
li {
list-style-type:none;
}
</style>
</head>
<body>
<div class="container-fluid"></div>
<br>
<div class="controls">
<label for="r">r <input class="form-control" type="text" id="r" /></label> &nbsp;&nbsp;
<label for="g">g <input class="form-control" type="text" id="g" /></label> &nbsp;&nbsp;
<label for="b">b <input class="form-control" type="text" id="b" /></label>
<br><br>
<ul>
<li>Type a decimal color value for each of rgb.</li>
<li>Values between 0-255 only, others will be normalized to 0-255.</li>
<li>Produces adjacent colors to the color provided.</li>
<li>After typing a new color, click outside of the input box to apply.</li>
</ul>
</div>
<!-- jquery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"
integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
crossorigin="anonymous"></script>
<!-- fastclick.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"
crossorigin="anonymous"></script>
<!-- bootstrap -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script type="text/javascript">
FastClick.attach(document.body);
// Not yet used or accurate, same color is filled every time
var colorSet = [];
/**
* Clears the HTML outlet and other color related settings.
*/
var clearColors = function() {
$('.container-fluid').html('');
colorSet = [];
};
/**
* Places a <div> on the screen and colors the background.
*/
var rgba = function(r, g, b, text) {
$('.container-fluid').append('<div class="color color-'
+ text + '" style="background-color:rgba('
+ r + ',' + g + ',' + b + ', 1);"><span class="label">'
+ text + '</span></div>');
};
/**
* Determines if val is an Integer.
*/
var isInt = function(val) {
return !isNaN(val)
&& parseInt(Number(val)) == val
&& !isNaN(parseInt(val, 10));
}
/**
* Alias for !isInt(val).
*/
var notInt = function(val) {
return !isInt(val);
}
/**
* Coerces the value to be between 0-255
*/
var safeColor = function(val, constant) {
if (notInt(val)) {
return 0;
}
if (val > 255) {
return val % 255;
} else if (val < 0) {
return (val * -1) % 255;
} else {
return val;
}
};
// start: adjacentColors functions
/**
* Bumps or changes the value of val by some algorithm.
*/
var bump = function(val, constant) {
var bitty = Math.round(val * 0.25); // a bit of the original
var newval = val + (bitty * constant);
return safeColor(newval);
};
/**
* Draws all of the colored <div>'s as adjacent colors
* to the first and then the next and so on.
*/
var adjacentColors = function(firstColor) {
var color = firstColor;
for (var i = 0; i < 4; i++) {
if (i > 0) {
color[0] = bump(color[0], 1);
color[1] = bump(color[1], 1);
color[2] = bump(color[2], 1);
}
var text = color.join(',');
rgba(color[0], color[1], color[2], text);
colorSet.push(color);
}
}
// end: adjacentColors functions
/**
* Actually runs the coloring methods and draws the screen.
*/
var runColorBuilder = function(firstColor, colorMethod) {
clearColors();
colorMethod(firstColor);
};
$(document).ready(function() {
var firstColor = [86, 138, 191];
var colorMethod = adjacentColors;
// Set up page
$("#r").val(firstColor[0]).on('blur', function() {
firstColor[0] = safeColor(parseInt($("#r").val(), 10));
$("#r").val(safeColor(firstColor[0]));
runColorBuilder(firstColor, colorMethod);
});
$("#g").val(firstColor[1]).on('blur', function() {
firstColor[1] = safeColor(parseInt($("#g").val(), 10));
$("#g").val(safeColor(firstColor[1]));
runColorBuilder(firstColor, colorMethod);
});
$("#b").val(firstColor[2]).on('blur', function() {
firstColor[2] = safeColor(parseInt($("#b").val(), 10));
$("#b").val(safeColor(firstColor[2]));
runColorBuilder(firstColor, colorMethod);
});
// Render colors
runColorBuilder(firstColor, adjacentColors);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment