js to achieve color ladder gradient effect (Gradient algorithm)

The color in html can be represented by rgb and hex.

In color, hue, lightness and purity can also produce gradient effect, and will show a rich level of aesthetic feeling. This paper mainly describes the step gradient algorithm of RGB values of two colors.

For example, hexadecimal colors such as # 336600 respectively indicate that the value of r in rgb mode is hexadecimal 33 (i.e.,), the value of g is hexadecimal 66, and b is hexadecimal 00. After conversion, it is completely expressed as rgb (51, 102, 0) by rgb.

Among them, it is inconvenient to use hexadecimal for addition, subtraction, multiplication and division, especially the hexadecimal color combination of rgb (# 336600). Therefore, we can convert hexadecimal to rgb for single cascade operation in combination.

It is known that RStart=50, REnd=200, RStart and REnd are divided into three parts on average (Step=3), and the values of each part (StepN) are calculated.

Equation: Gradient = RStart + (REnd-RStart)/Step * N (value of R in color rgb of step N)

The implementation is very simple, but you need to convert colors from rgb to hex.

Implementation code:

<script type="text/javascript">
 /*
 //  Author  yanue
 //  Parameters: 
 // startColor Beginning color hex
 // endColor End color hex
 // step: Several classes (steps) 
 */
 function gradientColor(startColor,endColor,step){
  startRGB = this.colorRgb(startColor);// Convert to rgb Array pattern 
  startR = startRGB[0];
  startG = startRGB[1];
  startB = startRGB[2];
  endRGB = this.colorRgb(endColor);
  endR = endRGB[0];
  endG = endRGB[1];
  endB = endRGB[2];
  sR = (endR-startR)/step;// Total difference 
  sG = (endG-startG)/step;
  sB = (endB-startB)/step;
  var colorArr = [];
  for(var i=0;i<step;i++){
  // Calculate every 1 Stepwise hex Value  
   var hex = this.colorHex('rgb('+parseInt((sR*i+startR))+','+parseInt((sG*i+startG))+','+parseInt((sB*i+startB))+')');
   colorArr.push(hex);
  }
  return colorArr;
 }
 //  Will hex Representation is converted to rgb Representation ( Back here rgb Array pattern )
 gradientColor.prototype.colorRgb = function(sColor){
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  var sColor = sColor.toLowerCase();
  if(sColor && reg.test(sColor)){
   if(sColor.length === 4){
    var sColorNew = "#";
    for(var i=1; i<4; i+=1){
     sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
    }
    sColor = sColorNew;
   }
   // Deal with 6 Color value of bit 
   var sColorChange = [];
   for(var i=1; i<7; i+=2){
    sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
   }
   return sColorChange;
  }else{
   return sColor;
  }
 };
 //  Will rgb Representation is converted to hex Representation 
 gradientColor.prototype.colorHex = function(rgb){
  var _this = rgb;
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  if(/^(rgb|RGB)/.test(_this)){
   var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g,"").split(",");
   var strHex = "#";
   for(var i=0; i<aColor.length; i++){
    var hex = Number(aColor[i]).toString(16);
    hex = hex<10 ? 0+''+hex :hex;//  Ensure that each rgb The value of is 2 Bit 
    if(hex === "0"){
     hex += hex;
    }
    strHex += hex;
   }
   if(strHex.length !== 7){
    strHex = _this;
   }
   return strHex;
  }else if(reg.test(_this)){
   var aNum = _this.replace(/#/,"").split("");
   if(aNum.length === 6){
    return _this;
   }else if(aNum.length === 3){
    var numHex = "#";
    for(var i=0; i<aNum.length; i+=1){
     numHex += (aNum[i]+aNum[i]);
    }
    return numHex;
   }
  }else{
   return _this;
  }
 }
 var gradient = new gradientColor('#013548','#554851',10);
 console.log(gradient);// Console output 
 alert(gradient);
</script>