How to increment / decrement hex color values with javascript / jQuery

Question

Is it possible to increment or decrement hex color values on a step-by-step basis in jQuery / javascript?

What I would like to do is something like this:

Adapting from a for-loop like

for (var i = 0; i <= 100; i++) {
    console.log(i);
}

I would like to do something like

for (var color = 000000; color <= ffffff; color++) {
    console.log(color);
}

without any conversion.

Is that possible? I've allready tried this:

for (var color = parseInt('000000', 16); color <= parseInt('ffffff', 16); color++){
    console.log(color.toString(16));
}

and it works but it's terribly slow (I get the warning that the script is slowing down the website and if I want to stop the script).

The reason why I want to do this: I would like to change the color stops of svg gradients in a certain interval. If I had for example this svg (simplified):

<svg>
    ...
    <linearGradient>
        <stop offset="0%"  stop-color="#C8E3EF"/>
        <stop offset="100%"  stop-color="#C8E3EF"/>
    </linearGradient>
    ...
</svg>

This gradient would of course appear as a solid color. Now I want to change it step by step to for example

<svg>
    ...
    <linearGradient>
        <stop offset="0%"  stop-color="#dfcf99"/>
        <stop offset="100%"  stop-color="#c5b6ec"/>
    </linearGradient>
    ...
</svg>

At each step or interval I want to go one value closer to the target color (through addition/substraction). In the end the result should be a smooth color-animation. Is that possible without the conversion? It does not have to be a for-loop btw., I just chose it to illustrate my idea.

Answer 1

I wrote a gradient-function some time ago, maybe it helps you (returns an Array):

function gradient(startColor, endColor, steps) {
             var start = {
                     'Hex'   : startColor,
                     'R'     : parseInt(startColor.slice(1,3), 16),
                     'G'     : parseInt(startColor.slice(3,5), 16),
                     'B'     : parseInt(startColor.slice(5,7), 16)
             }
             var end = {
                     'Hex'   : endColor,
                     'R'     : parseInt(endColor.slice(1,3), 16),
                     'G'     : parseInt(endColor.slice(3,5), 16),
                     'B'     : parseInt(endColor.slice(5,7), 16)
             }
             diffR = end['R'] - start['R'];
             diffG = end['G'] - start['G'];
             diffB = end['B'] - start['B'];

             stepsHex  = new Array();
             stepsR    = new Array();
             stepsG    = new Array();
             stepsB    = new Array();

             for(var i = 0; i <= steps; i++) {
                     stepsR[i] = start['R'] + ((diffR / steps) * i);
                     stepsG[i] = start['G'] + ((diffG / steps) * i);
                     stepsB[i] = start['B'] + ((diffB / steps) * i);
                     stepsHex[i] = '#' + Math.round(stepsR[i]).toString(16) + '' + Math.round(stepsG[i]).toString(16) + '' + Math.round(stepsB[i]).toString(16);
             }
             return stepsHex;

         }