Algorithm: How do I fade from Red to Green via Yellow using RGB values?

Question

I want to display a color based on a value from 0 to 100. At one end (100), it's pure Red, the other end (0), pure Green. In the middle (50), I want it to be yellow.

And I want the colors to fade gradually from one to another, such that at 75, the color is half red and half yellow, etc.

How do I program the RGB values to reflect this fading? Thanks.

Solution 1

The RGB values for the colors:

• Red 255, 0, 0
• Yellow 255, 255, 0
• Green 0, 255, 0

Between Red and Yellow, equally space your additions to the green channel until it reaches 255. Between Yellow and Green, equally space your subtractions from the red channel.

Solution 2

I had the same need and I just resolved with this:

myColor = new Color(2.0f * x, 2.0f * (1 - x), 0);

Explanation: Instead of the [0-255] range, let's focus on the [0.0-1.0] range for color components:

• Green = 0.0, 1.0, 0.0
• Yellow = 1.0, 1.0, 0.0
• Red= 1.0, 0.0, 0.0

If you just scale the green component from 0.0 (on one end) to 1.0 (on the other end) and do the same thing with the red component (but going backwards), you'll get ugly and non-uniform color distribution.

To make it look nice, we could write a lot of code, or we could be more clever.

If you look carefully at the single components, you can see that we can split the range in two equal parts: in the first one we increase the red component from 0.0 to 1.0, leaving the green at 1.0 and the blue at 0.0; in the second we decrease the green component, leaving the other 2 as they are. We can take advantage of the fact that any value above 1.0 will be read as 1.0, by maxing out our values to simplify the code. Assuming your x value goes from 0.00 (0%) to 1.00 (100%), you can multiply it by 2 to let it go over the 1.0 limit for color components. Now you have your components going from 0.0 to 2.0 (the red one) and from 2.0 to 0.0 (the green one). Let them be clipped to [0.0-1.0] ranges and there you go.

If your x moves in another range (like [0-100]) you need to choose an appropriate factor instead of 2

Solution 3

Here is a very simple linear interpolation of the color components. It might serve your needs.

public Color GetBlendedColor(int percentage)
{
    if (percentage < 50)
        return Interpolate(Color.Red, Color.Yellow, percentage / 50.0);
    return Interpolate(Color.Yellow, Color.Lime, (percentage - 50) / 50.0);
}

private Color Interpolate(Color color1, Color color2, double fraction)
{
    double r = Interpolate(color1.R, color2.R, fraction);
    double g = Interpolate(color1.G, color2.G, fraction);
    double b = Interpolate(color1.B, color2.B, fraction);
    return Color.FromArgb((int)Math.Round(r), (int)Math.Round(g), (int)Math.Round(b));
}

private double Interpolate(double d1, double d2, double fraction)
{
    return d1 + (d2 - d1) * fraction;
}

Solution 4

I don't know C#, so this answer is just a suggested approach. Let x denote the int that ranges from 0 to 100. Something like this should work:

red   = (x > 50 ? 1-2*(x-50)/100.0 : 1.0);
green = (x > 50 ? 1.0 : 2*x/100.0);
blue  = 0.0

The idea is to start at red: (1.0,0.0,0.0). Then increase the green to get yellow: (1.0,1.0,0.0). Then decrease the red to get green: (0.0,1.0,0.0).

Edit: Here is the code in C#

static Color GetColorFromRedYellowGreenGradient(double percentage)
{
    var red = (percentage > 50 ? 1 - 2 * (percentage - 50) / 100.0 : 1.0) * 255;
    var green = (percentage > 50 ? 1.0 : 2 * percentage / 100.0) * 255;
    var blue = 0.0;
    Color result = Color.FromArgb((int)red, (int)green, (int)blue);
    return result;
}

Solution 5

Simplified extension method;

public static Color Interpolate(this Color source, Color target, double percent)
{
    var r = (byte)(source.R + (target.R - source.R) * percent);
    var g = (byte)(source.G + (target.G - source.G) * percent);
    var b = (byte)(source.B + (target.B - source.B) * percent);

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

Usage;

var low = 33.0;
var high = 100.0;
var color = Color.Red.Interpolate(Color.Green, low / high);

View more solutions

Comments

[Giorgio Aresu]

Thank you very much. I thought of this approach when I found myself in this exact situation, because other solutions seemed too complicate for such a task

[Felipe]

This is definitely the best answer as it is simple and works perfectly. I actually had to work out a few values to understand fully why it worked so well

[Rafael Herscovici]

It looks like you forgot that r.g.b values are up to 255 and not 100.

[LarzStarz]

Excellent solution for our needs. We're computing it in Javascript and going from Red through White to Green. This adds an interesting twist as the Yellow component goes from 0.0 to 1.0 and back to 0.0 through the scale. This computes as yellowValue = 1 - Math.abs(value - 0.5) * 2;

[Tincan]

In the Interpolate function, assuming d2 is your target color and d1 is your begin color, it should be (d2 - d1) instead of (d1 - d2).

[Adam Hopkins]

Great idea @GiorgioAresu! This is one of those answers that I believe deserves far more up votes. Great solution, and great write up to explain the idea.

[Adam Hopkins]

@GiorgioAresu, I took your principle and applied it to a utility on a codepen found here: codepen.io/ahopkins/full/beNWWp

[Setsu]

This doesn't answer the original question. Not only does it go through white instead of yellow, it operates on a different range of numbers than requested.

[Benj]

+1 for having a green-to-white-to-red algorithm which fits me, but indeed does not answer the OP question.

[Siwei]

this is more straightforward.

[Giorgio Aresu]

This won't actually fade nicely, the yellow section will be pretty narrow

[Christian Ivicevic]

This helped me a lot with custom colors and the fix to d1 and d2.

[laserpython]

Works perfectly! I was using python (PyQt5) and had to modify slightly: QColor(min(255,2*255*(temp)),min(255,2*255*(1-temp)),0)

[Ansjovis86]

In JS i adapted it to this: const red = Math.min(2 - (2 * Fraction), 1) * 255; const green = Math.min(2 * Fraction, 1) * 255;

[Hambone]

Don't care what question this answers... this is genius.

[Ferrybig]

Colors are not linear, a change from 0 to 64 I'd bigger than a change from 191 to 255, this is especially clear on led displays, as their black is blacker.

[duedl0r]

This solution doesn't go through yellow. It's a nice solution if you need green to red gradient. Strictly speaking, it doesn't answer OPs question.

[Giorgio Aresu]

@duedl0r yes it does, as explained in the answer. It does so while keeping the yellow at the exact center of the gradient, instead of skewed at one side. Did you try it?

[duedl0r]

@GiorgioAresu: Yes you're right. I tried it, but made an error: I didn't read to the end ;)

[Hanif Bin Ariffin]

additionally, instead of using if statements to bound your ranges, use %. No branching in your code.

[Giorgio Aresu]

@HanifBinAriffin I think you meant to reply to a different answer :)

[jippyjoe4]

@Ferrybig, taking your comment into consideration, what is the proper interpolation formula?