我需要用JS中的两种颜色生成平滑的颜色范围[重复]

This question already has an answer here:

这个问题在这里已有答案:

Javascript color gradient 10 answers

Javascript颜色渐变10个答案

I have two color pickers (start, end) and I need to produce a color range from start to end. The problem I have is the stepping from one to the next. If it was just green I could go from 0-255 on the G channel but being I have 3 channels(rgb) it's rather confusing.

我有两个颜色选择器(开始,结束),我需要从头到尾产生一个颜色范围。我遇到的问题是从一个步骤到另一个步进。如果它只是绿色,我可以在G通道上从0到255,但是我有3个通道(rgb)它相当令人困惑。

My first thought was to convert rrggbb (hex) to dec and just add to the result. I could then convert it back to RGB This gives me a nice rang in short bursts. For example I get a nice light yellow to dark yellow but after that it goes to blue.

我的第一个想法是将rrggbb(hex)转换为dec并只添加到结果中。然后我可以将它转换回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)";

So I'm guessing I could do this with hue saturation but not sure how to do so. Ideally it would be grate to go from blue to red and get a blue to purple to red effect. I'm sure that is possible but it may require a 3rd party include. I have not found anything that does this so far. I don't have to use decimal the color picker has a few options (RGB, hsl, and hex). https://github.com/PitPik/tinyColorPicker

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

1 个解决方案

#1

If you wanted a function to give you a range(array) of colors between two colors, here's another option at JSFiddle

如果你想让一个函数给你两种颜色之间的颜色范围(数组),这里是JSFiddle的另一个选项

Here's the main code for it:

这是它的主要代码:

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;
};

#1