Color Interpolation Between 3 Colors in .NET

Question

I would like to smoothly interpolate color from Color A (let's call it red) to Color C (let's call it green) going through color B (let's call it yellow), based on the value of a certain variable.

If the variable = 100, I want pure green. If the variable = 50, I want pure yellow. If the variable = 0, I want pure red.

I understand you can treat each RGB triplet as a coordinate in 3-dimensional space. What I'm looking for is a quick-and-dirty linear interpolation trick that works cleanly with the specific layout of the .NET Color type (separate values for ARGB etc).

Answer 1

First, you ask for linear interpolation but you don't specify that color B lives on the line between color A and color C; this is necessary. Second, you didn't specify but I am going to make a simplifying assumption that color B is the midpoint of the line between color A and color C; the following code is easily modified if this is not true. Lastly, I changed your assumption that the parameter be an integer between zero and one-hundred to be a double between zero and one. The code is easier to write and easier to understand in the latter case, and can still be used with the former (divide your inputs by one-hundred).

class ColorInterpolator {
    delegate byte ComponentSelector(Color color);
    static ComponentSelector _redSelector = color => color.R;
    static ComponentSelector _greenSelector = color => color.G;
    static ComponentSelector _blueSelector = color => color.B;

    public static Color InterpolateBetween(
        Color endPoint1,
        Color endPoint2,
        double lambda) {
        if (lambda < 0 || lambda > 1) {
            throw new ArgumentOutOfRangeException("lambda");
        }
        Color color = Color.FromRgb(
            InterpolateComponent(endPoint1, endPoint2, lambda, _redSelector),
            InterpolateComponent(endPoint1, endPoint2, lambda, _greenSelector),
            InterpolateComponent(endPoint1, endPoint2, lambda, _blueSelector)
        );

        return color;
    }

    static byte InterpolateComponent(
        Color endPoint1,
        Color endPoint2,
        double lambda,
        ComponentSelector selector) {
        return (byte)(selector(endPoint1)
            + (selector(endPoint2) - selector(endPoint1)) * lambda);
    }
}

How do you modify this if color B is not the midpoint between color A and color C? The easiest way is the following. If the parameter (what I call "lambda") is less than 0.5, multiply lambda by two and return the interpolated color between color A and color B. If the parameter is greater than 0.5, multiply lambda by two and subtract one (this maps [0.5, 1] onto [0, 1]) and return the interpolated color between color B and color C.

If you don't like the requirement that color B live on the line between color A and color C, then you can use exactly the modification that I just described to do a piecewise-linear interpolation between the colors.

Finally, you did not specify if you want to interpolate the so-called alpha value (the 'A' in "ARGB"). The above code is easily modified to handle this situation too. Add one more ComponentSelector defined as color => color.A, use InterpolateComponent to interpolate this value and use the Color.FromArgb(int, int, int, int) overload of Color.FromArgb.

Answer 2

Another way to blend colors using Gaussian distribution like this (any number of colors for a range of 0.0 - 1.0, to increase blending increase sigma_2 value)

public static Color InterpolateColor(Color[] colors, double x)
{
    double r = 0.0, g = 0.0, b = 0.0;
    double total = 0.0;
    double step = 1.0 / (double)(colors.Length - 1);
    double mu = 0.0;
    double sigma_2 = 0.035;

    foreach (Color color in colors)
    {                
        total += Math.Exp(-(x - mu) * (x - mu) / (2.0 * sigma_2)) / Math.Sqrt(2.0 * Math.PI * sigma_2);
        mu += step;
    }

    mu = 0.0;
    foreach(Color color in colors)
    {                
        double percent = Math.Exp(-(x - mu) * (x - mu) / (2.0 * sigma_2)) / Math.Sqrt(2.0 * Math.PI * sigma_2);
        mu += step;

        r += color.R * percent / total;
        g += color.G * percent / total;
        b += color.B * percent / total;
    }

    return Color.FromArgb(255, (int)r, (int)g, (int)b);
}

More information http://en.wikipedia.org/wiki/Normal_distribution

Sample of blending 3 colors: