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

问题:

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.

回答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;           } 

回答2:

Well you can do it simply by this way:

var incrementColor = function(color, step){     var colorToInt = parseInt(color.substr(1), 16),                     // Convert HEX color to integer         nstep = parseInt(step);                                         // Convert step to integer     if(!isNaN(colorToInt) && !isNaN(nstep)){                            // Make sure that color has been converted to integer         colorToInt += nstep;                                            // Increment integer with step         var ncolor = colorToInt.toString(16);                           // Convert back integer to HEX         ncolor = '#' + (new Array(7-ncolor.length).join(0)) + ncolor;   // Left pad "0" to make HEX look like a color         if(/^#[0-9a-f]{6}$/i.test(ncolor)){                             // Make sure that HEX is a valid color             return ncolor;         }     }     return color; }; 

For steps:

• 1 by 1 to 256 increment last color
• 256 by 256 increment middle color
• 65536 by 65536 increment first color

A running example here: http://jsfiddle.net/a3JbB/

回答3:

Use setInterval to remove exception(stack overflow). jsfiddle

 var start = 0x000000,     end = 0xFFFFFF, temp;     var intervalId = setInterval(function(){        if(start== end){clearInterval(intervalId )};        temp = (start).toString(16);                                if(temp.length < 8){                   temp = "0000000".substring(0, 8-temp.length)+temp;               }                         start++;             console.log(temp );       }, 10);    

文章来源: How to increment / decrement hex color values with javascript / jQuery