tags:

views:

373

answers:

5

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?

A: 

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

Simonw
that';s right...but what about orange, pink...etc...that's my problem
Duncan Benoit
+3  A: 

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

ChrisW
+10  A: 

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.

Jon Skeet
You may not want to do a linear interpolation in RGB, actually. You may get better results doing interpolation in HSL or HSV, depending on the effect you're looking for. Consider the case of interpolating between pure red and pure green. In RGB that's (255, 0, 0) to (0, 255, 0). The linear interpolation gives a midpoint of (127, 127, 0), which is a dark yellow. You may be expecting a bright yellow, however. In HSV pure red is (0°, 255, 255) and pure green is (120°, 255, 255), so when interpolating only the hue will change and the midpoint will be pure yellow.
Laurence Gonsalves
All true, but somewhat trickier when the colours are provided as RGB (as described in the question). Still doable, of course, by converting the initial RGB values into HSL/HSV, but that may be a little advanced for the OP. I'll edit the answer to mention it as a possibility though.
Jon Skeet
+1  A: 

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.

Tomas Lycken
+1  A: 

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.

RBerteig