jquery color variation

Question

I need to produce all 255/256 color variations of a given color, is there some advice to start, or a jQuery lib to use?

Thanks in advance.

Answer 1

I assume you're talking about performing some sort of math on the individual red, green, and blue channels (I think that's what you mean by "color") of a particular color value. I can only guess at your desired input and output values, but here's an example to start, manipulating the values in RGB space*. Assuming your input is a hex number:

var color = 0xFFD700, // "gold"

    // separate the channels using bitmasks
    redValue = color & 0xFF0000, // redValue is 0xFF0000
    greenValue = color & 0x00FF00, // greenValue is 0x00D700
    blueValue = color & 0x0000FF; // blueValue is 0x000000

// now we can manipulate each color channel independently
var lessRed = redValue - 0x010000,
    moreBlue = blueValue + 0x000001,
    newColor = lessRed + greenValue + moreBlue; // newColor is 0xFED701

So, one way to produce an array of all colors produced by varying the red channel, holding green and blue constant:

var colors = [],
    startColor = 0x00D700,
    endColor = 0xFFD700,
    incr = 0x010000;

while (startColor <= endColor)
{
    colors.push(startColor);
    startColor = startColor + incr;
}

// print the hex values
var i, len = colors.length, out = [];
for (var i=0; i<len; i++)
{
    out.push('0x' + colors[i].toString(16))
}
console.log(out.join('\n'))

If your input is a string, you just need to convert it to a number first.

var input = 'FFD700',
    hexValue = parseInt(input, 16);
console.log(hexValue.toString(10)); // prints: 16766720
console.log(hexValue.toString(16)); // prints: FFD700

Oh, and no jQuery needed!

---

* as per this answer, RGB space may not be the best color space to use, but based on your question, I think it is.

Answer 2

Thanks.

I found two interesting concepts:

Im going to play a little with the concepts from: http://www.xarg.org/project/jquery-color-plugin-xcolor/

$.xcolor.lighten and $.xcolor.darken

Another interesting reading: http://javascript.internet.com/miscellaneous/true-color-darkening-and-lightening.html

But the last one doestn work with Red, Green and Blue: FF0000 00FF00 0000FF

Maybe needs just a little fix to accept the 3 "real" Red, Green anb Blue hex values, but im lost.