|
|
|
Javascript web-safe color generator
10
I had searched high and low for a way to generate a palette of web-safe colors. Despite Google's best efforts, what I had found was lacking for my needs. So, I decided to write a library that would generate all 216 web safe colors, and then allow me to manipulate those colors in any way that I chose.
If anybody is curious as to why I would want to do something so... simple, it is because I needed a very light-weight color picker, and didn't want to mess with any fancy options.
If anybody is curious as to why I would want to do something so... simple, it is because I needed a very light-weight color picker, and didn't want to mess with any fancy options.
/**
* A global array that will hold the 216 web-safe color palette
*
* @var Array
*/
var websafePalette = new Array();
/**
* Converts a hexidecimal (base16) number back into a decimal (base10) number
* If hexNumber is an invalid hexidecimal value, this function will return 0
* to avoid NaN errors.
*
* @param string hexNumber - The hexidecimal number to convert to an integer
* @return integer
*/
function hex2dec(hexNumber)
{
// If only it were this easy to convert into other bases :)
var decNumber = parseInt(hexNumber, 16);
// If the conversion produced a non-number value, return 0
if (isNaN(decNumber)) {
return 0;
}
return decNumber;
}
/**
* Converts a decimal (base10) number into a hexidecimal (base16) number
* If decNumber is an invalid decimal value, this function will return 0
* to avoid NaN errors.
*
* @param integer decNumber - The decimal number to convert to hexidecimal
* @return string
*/
function dec2hex(decNumber)
{
// The allowed hex characters
var hexChars = '0123456789ABCDEF';
// If the parameter we were passed is not a number,
// then we will return zero and not process any further.
if (isNaN(decNumber)) {
return 0;
}
// Get the first hex character
var hexNumber = hexChars.substr(decNumber & 15, 1);
// Loop through and get the rest of the hex characters
while (decNumber > 15) {
// Shift the bits to the right
decNumber >>= 4;
// Get the hex value
hexNumber = hexChars.substr(decNumber & 15, 1) + hexNumber;
}
// If the length of the hex character is less than 2, we will
// left pad the value with a zero.
if (hexNumber.length < 2) {
hexNumber = '0' + hexNumber;
}
// Return our hex value
return hexNumber;
}
/**
* Generate the 216 web-safe color palette and store the values in the
* global websafePalette array.
*
* @uses websafePalette
*
* @return void
*/
function getWebsafePalette()
{
// Declare our red, green, and blue variables.
var decRed = 0;
var decGreen = 0;
var decBlue = 0;
// Start off with our black color
websafePalette[0] = dec2hex(decRed) + dec2hex(decGreen) + dec2hex(decBlue);
// i is incremented in steps of 51; j is our array index
for (var i = 0, j = 1; i < 256; i += 51, j++) {
if ((decRed == 255 && decGreen == 255 && decBlue == 255)) {
// Once we've reached our final color (white), we stop looping
break;
}
if (decGreen > 255) {
// Increment our red value
decRed += 51;
// Roll green back to zero, along with the step iterator
decGreen = i = 0;
// Store the current color
websafePalette[j++] = dec2hex(decRed) + dec2hex(decGreen) + dec2hex(decBlue);
}
if (decBlue >= 255) {
// Increment our green value
decGreen += 51;
// If the above causes the green to go above our threshold,
// then we have to increment the red and reset the green.
// We will lose colors if we don't do this.
if (decGreen > 255) {
decRed += 51;
decGreen = 0;
}
// Roll blue back to zero, along with the step iterator
decBlue = i = 0;
// Store the current color, and increment our array index
// If we don't increment the array index here we will lose 25 colors.
websafePalette[j++] = dec2hex(decRed) + dec2hex(decGreen) + dec2hex(decBlue);
}
// Increment our blue value
decBlue += 51;
// Store the current color
websafePalette[j] = dec2hex(decRed) + dec2hex(decGreen) + dec2hex(decBlue);
}
}
<html>
<head>
<script language="javascript" type="text/javascript" src="colors.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
// fill our websafePalette array with our colors
getWebsafePalette();
// Write out all of the colors to the document.
document.writeln('There are <b>' + websafePalette.length + '</b> web-safe colors.');
document.writeln('<div style="border: 1px solid black; width: 125px; height: 200px; overflow: scroll; overflow-x: hidden; overflow-y: scroll;"><table border="0" cellpadding="0" cellspacing="0">');
for (var i = 0; i < websafePalette.length; i++) {
document.writeln('<tr>');
document.writeln('<td style="border: 1px solid black; padding: 2px; width: 100px; height: 24px; font-family: monospace"><div style="margin-right: 8px; float: left; width: 24px; background-color: #' + websafePalette[i] + ';"> </div>#' + websafePalette[i] + '</td>');
document.writeln('</tr>');
}
document.writeln('</table></div>');
</script>
</body>
</html>




There are currently no comments for this snippet.