Question

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?

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

Any idea how to do that? Speed and simplicity is preferred to accuracy.

colours http://rabien.com/image/colours.png

Answer 1

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

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).

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

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.

EDIT: 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)

EDIT2: if you prefer “speed and simplicity”, you may use a L1-norm, instead of a L2-norm (euclidian norm)

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)

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.

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