Color Interpolation Between 3 Colors in .NET
Solution 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
.
Solution 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: