如何计算四色渐变？ [英] How do I calculate a four colour gradient?

问题描述

如果我在一个正方形的四个角上有四种颜色（A，B，C& D），我想用四种颜色之间混合的梯度填充那个正方形，我将如何计算点的颜色E？

If I have four colours (A, B, C & D) on four corners of a square and I want to fill that square with a gradient that blends nicely between the four colours how would I calculate the colour of the point E?

E越接近任何其他点，颜色应该影响结果的强度。

The closer E is to any of the other points, the strong that colour should affect the result.

有什么想法怎么办？

推荐答案

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

The best solution when a gradient is required between two colors, is to use the HSV representation (Hue Saturation Value).

如果您有HSV值两种颜色，你只是对H，S和V进行线性插值，你有很好的颜色（在RGB空间中插值总是导致坏结果）。

If you have the HSV values for your two colors, you just make linear interpolation for H, S and V, and you have nice colors (interpolation in RGB space always lead to "bad" results).

还可以找到此处公式从RGB到HSV和从HSV到RGB的公式。

You also find here the formulae to go from RGB to HSV and from HSV to RGB, respectively.

现在，对于四角的问题，您可以将四个H / S / V值的线性组合加权，从E到四个点A，B，C和D.

Now, for your problem with the four corner, you can make a linear combination of the four H/S/V values, weighted by the distance from E to that four points A,B,C and D.

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

same method than tekBlues, but in HSV space (it is quite easy to test it in RGB and in HSV spaces. And you will see the differences. In HSV, you just turn around the chromatic cylinder, and this is why it gives nice result)

编辑2：如果你喜欢速度和简单性，你可以使用L1-norm，而不是L2范数（欧几里德范数）

if you prefer "speed and simplicity", you may use a L1-norm, instead of a L2-norm (euclidian norm)

因此，如果 a 你的正方形和点的坐标是A（ 0 ， 0 ），B（ 0 ， a ），C（ a ， / code>），D（ a ， a code> x ， y ）可以计算：

So, if a is the size of your square and the coordinate of your points are A(0,0), B(0,a), C(a,0), D(a,a), then the Hue of a point E(x,y) can be computed with:

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）等等...

where Hue(A) is the Hue of point A, Hue(B) the Hue of B, etc...

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

You apply the same formulae for the Saturation and Value.

/饱和度/值为你的点E，你可以在RGB空间变换。

Once you have the Hue/Saturation/Value for your point E, you can transform it in RGB space.

这篇关于如何计算四色渐变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！