Color generation function

Question

Let's consider the following scenario: a function which can generate code colors from white to red, from white to blue, from white to pink, from white to orange, etc.

The colors code is in RGB format with values from 0 to 255.

Any ideas? Can you give me the pseudocode or link to such algorithm?

Answer 1

It sounds like you're after linear interpolation - in your case, interpolating from white to the specified colour. For example, in C#:

public IEnumerable<Color> Interpolate(Color from, Color to, int steps)
{
    int range = steps-1; // Makes things a bit easier
    for (int i=0; i < steps; i++)
    {
        // i is the proportion of the "to" colour to use.
        // j is the proportion of the "from" colour to use.

        int j = range - i;
        int r = ((from.R * j) + (to.R * i)) / range;
        int g = ((from.G * j) + (to.G * i)) / range;
        int b = ((from.B * j) + (to.B * i)) / range;
        yield return new Color(r, g, b);
    }
}

Of course there are other ways of doing it besides a linear interpolation, but that's likely to be the simplest. Note that this gets tricky if you have a lot of steps or larger values, because you need to consider the possibility of overflow. In this case you should be okay though - you're unlikely to want more than 256 steps, and the maximum value is 255, so you won't get close to the limits of ints.

EDIT: As noted in comments, RGB may well not be the best domain in which to use linear interpolation. You may be best off converting the from/to RGB values into HSL or HSV, and doing interpolation on those. This may be easy or tricky depending on your platform. The wikipedia link in the previous sentence gives formulae for the appropriate calculations if they're not provided for you.

Answer 2

Algorithm:

1. Find the RGB value for white
2. Find the RGB value for the other color (for example you mention red, blue, pink, orange)
3. Calculate RGB values whose RGB components are arithmetically between the RGB components of two extremes

For example, if one extreme is (0,0,0) and the other extreme is (0,255,255) then the value half-way between these two colors is (0,128,128) ... and the value that's one quarter of the way between these two values is (0,64,64).

Answer 3

Interpolating colors through known, specific points is often used for constructing color schemes for graphing data. An alternative to an explicit interpolation formula is to pick a color scheme that has some design behind its representation. A good source of such a scheme is ColorBrewer.

Even if you need to interpolate, starting from a well-designed color scheme could produce much more usable results.

Answer 4

Start with the two colors you want gradients between, and split them up in R, G and B parts.

Decide how many "steps" you want to fade through.

Divide the difference between the R, G and B parts with the number of steps. You now have a "step difference" for each color.

Loop through each step and add the step difference to the color value once for each iteration. Round to integers the last thing you do.

Answer 5

What colours do you want to change to? white to red would just be a case of starting with 255 255 255 and decrementing the second two until you have 255 0 0. blue would be keeping the last value and decrementing to end up with 0 0 255, etc