Skip to content

Instantly share code, notes, and snippets.

@rathorevaibhav
Forked from babakhani/jsgradient
Last active October 1, 2020 06:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rathorevaibhav/34ff9bdbbd0faeb2f9bdd86dec0fb3cf to your computer and use it in GitHub Desktop.
Save rathorevaibhav/34ff9bdbbd0faeb2f9bdd86dec0fb3cf to your computer and use it in GitHub Desktop.
get array of color between two colors
function hexToRgb(hex){
var r, g, b, parts;
hex = hex.replace('#', '');
if(hex.length !== 3 && hex.length !== 6){
return [255,255,255];
}
if(hex.length == 3){
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
r = parseInt(hex.substr(0, 2), 16);
g = parseInt(hex.substr(2, 2), 16);
b = parseInt(hex.substr(4, 2), 16);
return [r,g,b];
}
function rgbToHex(color){
color[0] = (color[0] > 255) ? 255 : (color[0] < 0) ? 0 : color[0];
color[1] = (color[1] > 255) ? 255 : (color[1] < 0) ? 0 : color[1];
color[2] = (color[2] > 255) ? 255 : (color[2] < 0) ? 0 : color[2];
return this.zeroFill(color[0].toString(16), 2) + this.zeroFill(color[1].toString(16), 2) + this.zeroFill(color[2].toString(16), 2);
}
function zeroFill( number, width ){
width -= number.toString().length;
if ( width > 0 ){
return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
}
return number;
}
function generateGradient(colorA, colorB, steps){
var result = [], rInterval, gInterval, bInterval;
colorA = this.hexToRgb(colorA);
colorB = this.hexToRgb(colorB);
steps -= 1;
rStep = ( Math.max(colorA[0], colorB[0]) - Math.min(colorA[0], colorB[0]) ) / steps;
gStep = ( Math.max(colorA[1], colorB[1]) - Math.min(colorA[1], colorB[1]) ) / steps;
bStep = ( Math.max(colorA[2], colorB[2]) - Math.min(colorA[2], colorB[2]) ) / steps;
result.push( '#'+this.rgbToHex(colorA) );
var rVal = colorA[0],
gVal = colorA[1],
bVal = colorA[2];
for (var i = 0; i < (steps-1); i++) {
rVal = (colorA[0] < colorB[0]) ? rVal + Math.round(rStep) : rVal - Math.round(rStep);
gVal = (colorA[1] < colorB[1]) ? gVal + Math.round(gStep) : gVal - Math.round(gStep);
bVal = (colorA[2] < colorB[2]) ? bVal + Math.round(bStep) : bVal - Math.round(bStep);
result.push( '#'+this.rgbToHex([rVal, gVal, bVal]) );
};
result.push( '#'+this.rgbToHex(colorB) );
return result;
}
console.log(generateGradient('#143945', '#D5B745', 11));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment