如何计算四色渐变？答案

【问题标题】：How do I calculate a four colour gradient?如何计算四色渐变？
【发布时间】：2009-07-09 23:28:43
【问题描述】：

如果我在正方形的四个角上有四种颜色（A、B、C 和 D），并且我想用渐变填充该正方形，该渐变可以很好地融合在四种颜色之间，我将如何计算点 E 的颜色?

E 越接近其他点，颜色对结果的影响越强。

知道怎么做吗？速度和简单性优于准确性。

【问题讨论】：

【解决方案1】：

当两种颜色之间需要渐变时，最佳解决方案是使用HSV 表示（色相饱和度值）。

如果您有两种颜色的 HSV 值，您只需对 H、S 和 V 进行线性插值，就可以得到漂亮的颜色（RGB 空间中的插值总是会导致“坏”结果）。

您还可以找到 here 分别从 RGB 到 HSV 和从 HSV 到 RGB 的公式。

现在，对于四个角的问题，您可以对四个 H/S/V 值进行线性组合，按从 E 到这四个点 A、B、C 和 D 的距离加权。

编辑：与 tekBlues 相同的方法，但在 HSV 空间中（在 RGB 和 HSV 空间中测试它很容易。您会看到差异。在 HSV 中，您只需转动彩色圆柱体，这是为什么它给出了很好的结果）

EDIT2：如果您更喜欢“速度和简单”，您可以使用 L1 范数，而不是 L2 范数（欧几里得范数）

所以，如果a 是您的正方形的大小并且您的点的坐标是 A(0,0), B(0,a), C(a, 0), D(a,a)，然后点 E(x,y) 的色调可以用以下公式计算：

Hue(E) = ( Hue(B)*y/a + Hue(A)*(1-y/a) ) * (x/a)  +  ( Hue(D)*y/a + Hue(C)*(1-y/a) ) * (1-x/a)

其中Hue(A) 是 A 点的色调，Hue(B) 是 B 点的色调，等等...

您对饱和度和值应用相同的公式。

一旦获得了点 E 的色相/饱和度/值，就可以在 RGB 空间中对其进行变换。

【讨论】：

【解决方案2】：

查看这个网站，它提供了@ThibThib 评论“HSV 中的渐变将更令人满意”的视觉演示：

它是一个渐变创建器，可以创建和显示 RGB 渐变和 HSV 渐变。

如果您尝试从 FFAAAA 到 AAFFAA 的 9 个步骤（浅红色到绿色），您会在浅黄色中获得很好的过渡，并且 HSV 和 RGB 看起来相似。

但是尝试从 FF0000 到 00FF00（粗体红色到绿色）的 9 个步骤，您会看到 RGB 过渡到令人讨厌的绿棕色。然而，HSV 梯度会过渡到粗体黄色。

【讨论】：

【解决方案3】：

【讨论】：

我担心这种方法有问题。 “A”对“E”颜色的贡献程度的“权重”应该与距离的倒数成正比。如上所述，如果 E 正好在 A 处，那么到 A 的距离为 0，因此 A 不会对 E 的值做出贡献。但这正是只有 A 应该对E.