javascript - 我需要在 JS 中从两种颜色产生平滑的颜色范围

Question

这个问题已经有答案了:

Javascript color gradient (15 个回答)

已关闭 8 年前。

我有两个颜色选择器(开始、结束)，我需要生成从开始到结束的颜色范围。我遇到的问题是从一个到下一个的步骤。如果它只是绿色，我可以在 G channel 上从 0 到 255，但由于我有 3 个 channel (rgb)，所以相当困惑。

我的第一个想法是将 rrggbb(十六进制)转换为十进制，然后添加到结果中。然后我可以将其转换回 RGB，这给了我一个不错的短脉冲范围。例如，我得到了漂亮的浅黄色到深黄色，但之后它变成了蓝色。

var val = Number( this.gridIDMap.cellAt( j, i ).innerHTML );
val = Math.floor( val );
var r = 256 - Math.floor( val / ( 256 * 256 ) );
var g = 256 - Math.floor( val / 256 ) % 256;
var b = 256 - Math.floor( val % 256 );
this.gridIDMap.cellAt( j, i ).style.backgroundColor = "rgba(" + r + "," + g + "," + b + ",.25)";

所以我猜我可以用色调饱和度来做到这一点，但不知道如何做到这一点。理想情况下，它会是从蓝色到红色的格栅，并获得蓝色到紫色到红色的效果。我确信这是可能的，但可能需要第三方包含。到目前为止我还没有找到任何可以做到这一点的东西。我不必使用十进制，颜色选择器有几个选项(RGB、hsl 和十六进制)。 https://github.com/PitPik/tinyColorPicker

Answer 1

如果您想要一个函数为您提供两种颜色之间的颜色范围(数组)，这里有另一个选项 JSFiddle

这是它的主要代码:

var GColor = function(r,g,b) {
    r = (typeof r === 'undefined')?0:r;
    g = (typeof g === 'undefined')?0:g;
    b = (typeof b === 'undefined')?0:b;
    return {r:r, g:g, b:b};
};
var createColorRange = function(c1, c2) {
    var colorList = [], tmpColor;
    for (var i=0; i<255; i++) {
        tmpColor = new GColor();
        tmpColor.r = c1.r + ((i*(c2.r-c1.r))/255);
        tmpColor.g = c1.g + ((i*(c2.g-c1.g))/255);
        tmpColor.b = c1.b + ((i*(c2.b-c1.b))/255);
        colorList.push(tmpColor);
    }
    return colorList;
};