Javascript web-safe color generator





10
Date Submitted Thu. Feb. 8th, 2007 10:05 AM
Revision 1 of 1
Helper dohpaz
Tags "web safe colors" | JavaScript
Comments 0 comments
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.

/**
 * 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] + ';">&nbsp;</div>#' + websafePalette[i] + '</td>');
        document.writeln('</tr>');
    }
    document.writeln('</table></div>');
  </script>
 </body>
</html>
 

Ken S

Comments

There are currently no comments for this snippet.

Voting