Question

有没有快速的方法来完成这个？

例如，起始颜色#EEEEEE和结束颜色#FFFFFF会产生类似#FEFFEE的颜色。

Answer 1

当然十六进制编码为一个数字，但为了使它具有任何意义，你必须首先提取rgb组件：

function rgb(string){
    return string.match(/\w\w/g).map(function(b){ return parseInt(b,16) })
}
var rgb1 = rgb("#EEEEEE");
var rgb2 = rgb("#FFFFFF");

然后简单地使用所有组件的中间件：

var rgb3 = [];
for (var i=0; i<3; i++) rgb3[i] = rgb1[i]+Math.random()*(rgb2[i]-rgb1[i])|0;

最后将颜色重建为标准十六进制字符串：

var newColor = '#' + rgb3
    .map(function(n){ return n.toString(16) })
    .map(function(s){ return "00".slice(s.length)+s}).join('');

请注意，为了获得更好的效果，取决于您的目标，例如，如果您想保持亮度，使用与RGB不同的color space（比如HSL或HSV）可能会有用。

Answer 2

d3通过创建色阶来做得非常好：

var color = d3.scale.linear()
    .domain([-1, 0, 1])
    .range(["red", "white", "green"]);

color(-1)   // "#ff0000" red
color(-0.5) // "#ff8080" pinkish
color(0)    // "#ffffff" white
color(0.5)  // "#80c080" getting greener
color(0.7)  // "#4da64d" almost there..
color(1)    // "#008000" totally green!

Answer 3

如果我以正确的方式理解问题，您希望每个数字都在相同的范围内。您的意思是每个数字或每个组件（颜色通道）。对于每个数字，请参阅my fiddle

关键是：

for(var i = 0;i < 6; i++) {
    color += (Math.floor(Math.random() * (end-start+1)) + start).toString(16);
}

开头和结尾从0到15

或每个频道：

for(var i = 0;i < 3; i++) {
    color += (Math.floor(Math.random() * (end-start+1)) + start).toString(16);
}

开头和结尾在0到255之间

Answer 4

尝试：

function getRandomColor(start, end){
    var min=parseInt(start.replace("#",""), 16);
    var max=parseInt(end.replace("#",""), 16);
    return "#"+Math.floor((Math.random() * (max - min) + min)).toString(16).toUpperCase();
}

以下是Fiddle。

javascript，在开始和结束颜色之间选择一个随机的十六进制颜色

4 个答案: