The colors in html can be represented by rgb and hex.
In colors, hue, brightness, and purity can also produce a gradient effect and will show a rich layered beauty. This article mainly talks about the step gradient algorithm of two colors RGB values.
Among them, the hexadecimal color such as #336600 means 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 fully expressed by rgb as: rgb(51,102,0).
Among them, it is inconvenient to use hexadecimal to add, subtract, multiplication and division, and in particular, the hexadecimal color combination of rgb is also used (#336600). Therefore, we can convert hexadecimal to rgb to perform step-by-step operations in combination.
It is known that RStart=50, REnd=200, RStart and REnd are divided into 3 portions (Step=3), and find the value (StepN) of each portion.
Formula: Gradient = RStart+ (REnd-RStart) / Step * N (value of R in color rgb of step N)
The implementation method is very simple, just need to convert the colors from rgb to hex.
Implementation code:
<script type="text/javascript">
/*
// Author yanue
// Parameters:
// startColor: start color hex
// endColor: end color hex
// step: Several levels (several steps)
*/
function gradientColor(startColor,endColor,step){
startRGB = (startColor);//Convert to rgb array mode startR = startRGB[0];
startG = startRGB[1];
startB = startRGB[2];
endRGB = (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 the hex value of each step var hex = ('rgb('+parseInt((sR*i+startR))+','+parseInt((sG*i+startG))+','+parseInt((sB*i+startB))+')');
(hex);
}
return colorArr;
}
// Convert the hex representation method to the rgb representation method (return to the rgb array mode here) = function(sColor){
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
var sColor = ();
if(sColor && (sColor)){
if( === 4){
var sColorNew = "#";
for(var i=1; i<4; i+=1){
sColorNew += (i,i+1).concat((i,i+1));
}
sColor = sColorNew;
}
// Process six-digit color values var sColorChange = [];
for(var i=1; i<7; i+=2){
(parseInt("0x"+(i,i+2)));
}
return sColorChange;
}else{
return sColor;
}
};
// Convert rgb representation to hex representation = 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<; i++){
var hex = Number(aColor[i]).toString(16);
hex = hex<10 ? 0+''+hex :hex;// Ensure that the value of each rgb is 2 digits if(hex === "0"){
hex += hex;
}
strHex += hex;
}
if( !== 7){
strHex = _this;
}
return strHex;
}else if((_this)){
var aNum = _this.replace(/#/,"").split("");
if( === 6){
return _this;
}else if( === 3){
var numHex = "#";
for(var i=0; i<; i+=1){
numHex += (aNum[i]+aNum[i]);
}
return numHex;
}
}else{
return _this;
}
}
var gradient = new gradientColor('#013548','#554851',10);
(gradient);//Console output alert(gradient);
</script>
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!