梯度是美学中的一个重要形式美法则，它对应于突变。视觉因素如形状、大小、位置、方向、色彩等视觉因素可以分级，颜色，颜色，亮度，纯度也可以产生渐变效果，并会显示丰富的美感本文主要论述两种颜色的RGB值的梯度算法。

众所周知，A = 50，B = 200，A和B被分为3个部分（步= 3），和多少每个值（stepn）分别为。

公式：梯度= A +（B-A） /步* n

注}为了提高效率和避免浮点运算，除法往往是放在后面，所以公式是：梯度= A +（B-A）×n /步

在步骤= 3，1 = A +（A-B）/ 3 * 1 = 50 +（200-50）/ 3 = 100，第二步= A +（A-B）/ 3 * 2 = 50 +（200-50）/ 3 * 2 = 150可以根据公式得到。这是均匀梯度算法，很简单的原则，基本知识。

这两种颜色的渐变是两种颜色RGB通道的计算。例如，两种颜色的RGB（200,50,0）和RGB（50200,0）。

rstep1 = Ra＝RA +（ba-ra） /步* N = 200 +（50-200）/ 3 * 1 = 200-50 = 150

gstep1 = GA = GA +（ga-ga） /步* N = 50 +（200-50）/ 3 * 1 = 50 + 50 = 100

bstep1 =巴=巴+（BA-BA） /步* N = 0

所以rgbstep1 =（150100,0），可以用同样的方法来找到rgbstep2 =（100150,0）。

这是网页上的锥形文本的特殊效果。例如，在您的网页的HTML有这样的代码：你是我天空中最美丽的彩虹，然后将下面的代码添加到后面的实现渐进式的文本。（两种颜色的渐变：产生# c597ff和# 73e7a9）

复制代码代码如下所示：
VaR色素=# c597ff ；
Var ColorB =# 73e7a9 ；

/ /颜色# ff00ff格式阵列（2550255）
功能color2rgb（彩色）
{
Var r = parseInt (color.substr (1, 2), 16);
var g = parseInt（color.substr（3, 2），16）；
var b = parseInt（color.substr（5, 2），16）；
返回新数组（r，G，b）；
}

颜色/阵列（2550255）对# ff00ff格式
功能rgb2color（RGB）
{
Var s = #;
对于（var i = 0；i < 3；i + +）
{
var c = math.round（RGB {我}），ToString（16）；
如果（c.length = 1）
C = 0+ C；
S = C；
}
返回s.touppercase（）；
}

创建渐变
函数梯度（）
{
var str = mytext.innertext；
VaR结果= ；
步骤1：str.length；

新数组（3）；
创建一个color2rgb（科洛拉）；
var b = color2rgb（ColorB）；

对于（var = 0；n <步骤；n + +）
{
对于（var c = 0；C＜3；C++）计算 / / RGB通道
{
渐变{ } } = { + +（b - { - } - { }）；
}
结果=<字体颜色=+ rgb2color（梯度+）
>+ str.charat（N）+ ；
}
mytext.innerhtml =结果；
}

（渐变）； /运行程序


a、b、c三种颜色或各种颜色的渐变，在理论上，只要a、b逐渐变化，然后b、c逐渐变化，等等。在实践中，为了使每个像素的颜色均匀分布，产生各种插值算法，具体算法将在以后讨论。