如何获得从一种到另一种的中间颜色？ [复制]答案

【问题标题】：How to get intermediate colors from one to another? [duplicate]如何获得从一种到另一种的中间颜色？ [复制]
【发布时间】：2012-06-23 21:59:15
【问题描述】：

可能重复：
android color between two colors, based on percentage?
How to find all the colors between two colors?

一开始，我们在 RGB 中有两种颜色，以及一个数字，用于它们之间的中间颜色。方法必须返回具有所需颜色的数组。非常需要算法方面的帮助。

【问题讨论】：

Homework?
不，这是我的爱好项目^_^
How to find all the colors between two colors? 的可能副本。另见Color interpolation between 3 colors、How to interpolate a color sequence?、Non-Linear color interpolation?。
...Generating a list of colors, blue through red, 0% through 100%，Fastest way to calculate colors for a gradient?，colour range in javascript，Color generation function。
Programmers.SE 更适合算法设计等白板问题。

标签： algorithm

【解决方案1】：

假设我们有 2 种颜色 (R1,G1,B1) (R2,G2,B2) 和 N 种中间颜色：

for i from 1 to N:
    Ri = R1 + (R2-R1) * i / N
    Bi = B1 + (B2-B1) * i / N
    Gi = G1 + (G2-G1) * i / N
    AddToArray(Ri,Gi,Bi)

这就是你要找的吗？

PS：如果您想要更自然的颜色渐变，我建议您使用 HSL 颜色空间而不是 RGB。

【讨论】：

作为参考，这称为“线性插值”。
那不是三线性插值吗？（是的，我知道它是线性插值的扩展：））
不，它仍然是线性插值，因为您只是沿着一条线填充点 - 它是沿每个维度的线性插值。双线性插值用于调整图像大小，三线性插值用于对体积进行插值。这里需要的插值必须生成一个将整数映射到颜色的函数，但三线性插值是将 3d 空间中的向量或点映射到值。
正如 Charles Ma 在其回复中指出的那样，在 RGB 颜色空间中执行此操作会产生较差的结果。最好将颜色转换为 HSV，在那里执行线性插值，然后再转换回 RGV

【解决方案2】：

让您当前的 cR、cG 和 cB 值为 0%，并让 R、G 和 B 值为 100%，然后您只需迭代 i = 1 到 100，每次迭代添加 cRGB + i * ( RGB - cRGB）。您不必使用 100 种中间色，您可以使用其中 N 种。

function(currentColor, desiredColor, N) {

    var colors = [],
    cR = currentColor.R,
    cG = currentColor.G,
    cB = currentColor.B,
    dR = desiredColor.R - cR,
    dG = desiredColor.G - cG,
    dB = desiredColor.B - cB;

    for(var i = 1; i <= N; i++) {
        colors.push(new Color(cR + i * dR / N, cG + i * dG / N, cB + i * dB / N));
    }

    return colors;
}

但是，这不会为您提供非常好的中间色。您应该做的第一件事是将颜色转换为 HSV 或类似的颜色空间，其中强度与色调和饱和度是分开的。这将为您提供更好的中间颜色。 http://en.wikipedia.org/wiki/HSL_and_HSV

为此，首先将颜色转换为 HSV，然后运行与上述相同的算法，但使用 H S 和 V 而不是 RGB，但请记住 S 和 V 的最小值为 0，最大值为 1，而H 以 0 到 360 之间的度数表示。如果您希望 H 尽快从当前颜色变为目标颜色，则可能需要对 H 执行某些操作，例如如果 cH = 10 和 dH = 50，那么从 10 -> 50 是最短的，但如果 cH = 10 和 dH = 350，那么从 10 -> -10（与 350 度相同）的时间更短。

【讨论】：