graphics - 如何计算四色渐变？

Question

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

E 越接近任何其他点，颜色对结果的影响就越大。

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

score 24 · Accepted Answer

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

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

您还可以在此处找到分别从 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点的色调，B的色调等在哪里Hue(B)...

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

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

score 2 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

3 回答 3