Generate Color Gradient in C#

Ngu_Soon_Hui_3834 0
Viewed 43699

My question here is similar to the question here, except that I am working with C#.

I have two colors, and I have a predefine steps. How to retrieve a list of Colors that are the gradients between the two?

This is an approach that I tried, which didn't work:

int argbMax = Color.Chocolate.ToArgb();
int argbMin = Color.Blue.ToArgb();
var colorList = new List<Color>();

for(int i=0; i<size; i++)
{
    var colorAverage= argbMin + (int)((argbMax - argbMin) *i/size);
    colorList.Add(Color.FromArgb(colorAverage));
}

If you try the above code, you will find that a gradual increase in argb doesn't correspond to a visual gradual increase in the color.

Any idea on this?

system.drawing.color colors .net c#
6 Answers

You will have to extract the R, G, B components and perform the same linear interpolation on each of them individually, then recombine.

int rMax = Color.Chocolate.R;
int rMin = Color.Blue.R;
// ... and for B, G
var colorList = new List<Color>();
for(int i=0; i<size; i++)
{
    var rAverage = rMin + (int)((rMax - rMin) * i / size);
    var gAverage = gMin + (int)((gMax - gMin) * i / size);
    var bAverage = bMin + (int)((bMax - bMin) * i / size);
    colorList.Add(Color.FromArgb(rAverage, gAverage, bAverage));
}
user_831090

Maybe this function can help:

public IEnumerable<Color> GetGradients(Color start, Color end, int steps)
{
    Color stepper = Color.FromArgb((byte)((end.A - start.A) / (steps - 1)),
                                   (byte)((end.R - start.R) / (steps - 1)),
                                   (byte)((end.G - start.G) / (steps - 1)),
                                   (byte)((end.B - start.B) / (steps - 1)));

    for (int i = 0; i < steps; i++)
    {
        yield return Color.FromArgb(start.A + (stepper.A * i),
                                    start.R + (stepper.R * i),
                                    start.G + (stepper.G * i),
                                    start.B + (stepper.B * i));
    }
}
user_18380480

Combining this answer with the idea from several other answers to use floating-point steps, here's a complete method snippet for stepping with floating point. (With integer stepping, I had been getting asymmetrical gradient colors in a 16-color gradient from blue to red.)

Important difference in this version: you pass the total number of colors you want in the returned gradient sequence, not the number of steps to take within the method implementation.

public static IEnumerable<Color> GetColorGradient(Color from, Color to, int totalNumberOfColors)
{
    if (totalNumberOfColors < 2)
    {
        throw new ArgumentException("Gradient cannot have less than two colors.", nameof(totalNumberOfColors));
    }

    double diffA = to.A - from.A;
    double diffR = to.R - from.R;
    double diffG = to.G - from.G;
    double diffB = to.B - from.B;

    var steps = totalNumberOfColors - 1;

    var stepA = diffA / steps;
    var stepR = diffR / steps;
    var stepG = diffG / steps;
    var stepB = diffB / steps;

    yield return from;

    for (var i = 1; i < steps; ++i)
    {
        yield return Color.FromArgb(
            c(from.A, stepA),
            c(from.R, stepR),
            c(from.G, stepG),
            c(from.B, stepB));

        int c(int fromC, double stepC)
        {
            return (int)Math.Round(fromC + stepC * i);
        }
    }

    yield return to;
}
user_4027490
Related