javascript - 是否可以从渐变或两种颜色之间的范围中选择随机颜色？

Question

我有两个颜色范围的示例，即#ed1f7f 和#6c52a2，有没有可能的方法可以将一些具有一些随机颜色的元素放在这两个范围内？

标签： javascripthtmlcss

Answer 1

本质上，您在 3D 空间中进行线性插值。

有一个很好的公式可以做到这一点：

(1-u)*p_1+u*p_2

where u is a random float between 0 and 1
p_1, p_2 are the co-ordinate of the points

特别是对于颜色，如果您使用数组来存储颜色分量：

function interpolate(u, c1, c2) {
    return c1.map((a, i) => Math.floor((1-u) * a + u * c2[i]));
}
function pickRandom(u, c1, c2) {
    return interpolate(Math.random(), c1, c2);
}

如果您的颜色值是十六进制表示法，您需要先将它们转换为数字 rgb 或 hsl。