Alex Rivera | Logout

Color Interpolation Between 3 Colors in .NET

Asked 2009-08-06T02:26:04.053
9

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

Edit
Report

1 Answer

17

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 ret

answered 2009-08-06T03:27:40.287

Your Answer