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

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.

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

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.

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;
}

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;
}

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

After I experimented for a while with more realistic colors, here is my formula:

public Color GetColorOf(double value, double minValue, double maxValue)
{
    if (value == 0 || minValue == maxValue) return Color.White;

    var g = (int)(240 * value / maxValue);
    var r = (int)(240 * value / minValue);

    return (value > 0
        ? Color.FromArgb(240 - g, 255 - (int)(g * ((255 - 155) / 240.0)), 240 - g)
        : Color.FromArgb(255 - (int)(r * ((255 - 230) / 240.0)), 240 - r, 240 - r));
}

• You get no background (i.e. Color.White) for 0 (or NULL), or when min = max.
• For all positive values, you get an evenly distributed green color between RGB(240, 255, 240) and RGB(0, 155, 0).
• For all negative values, you get an evenly distributed red color between RGB(255, 240, 240) and RGB(230, 0, 0).

You need to use the HSB or HSV color representation instead, and play with the H ("Hue") value. See this other SO question for transformation betweeen RGB and HSB/HSV: https://stackoverflow.com/questions/359612/how-to-change-rgb-color-to-hsv

Take a look at LinearGradientBrush. It should be a complete implementation on what you're looking for.

I wrote a Swift 4 extension for UIColor which converts a percentage (0-100) to a UIColor from red to green.

I'm currently using it for progress bars in an analytics app. Here's an example:

let myNewColor = UIColor().greenRedProgress(percent: Int))

Here's the extension:

extension UIColor{

func greenRedProgress(percent: Int) -> UIColor{
    let modVal = CGFloat((Double(percent).truncatingRemainder(dividingBy: 50) / 50) * 255)
    if percent <= 0{
        return UIColor(red: 1.0, green: 0, blue: 0, alpha: 1)
    }else if percent >= 100{
        return UIColor(red: 0, green: 1.0, blue: 0, alpha: 1)
    }else{
        switch percent{
            case 1..<50: return UIColor(red: 1.0, green: (modVal/255), blue: 0, alpha: 1)
            case 51..<100: return UIColor(red: (255 - modVal)/255, green: 1.0, blue: 0, alpha: 1)
            case 50: return UIColor(red: 1.0, green: 1.0, blue: 0, alpha: 1)
            default: return UIColor(red: 0, green: 1.0, blue: 0, alpha: 1)
        }
    }
}}

This method (in c#, but can be easily translated to other languages) will take a percentage and list of colors and return the color on the gradient based on your percentage. When you pass in the colors, they need to be in order from 0 value to 100 value (so you would want to pass Green, Yellow, Red - in that order). If you find that you want different or more colors in the middle, just add them to the list of colors you pass in the order you want them to appear.

public Color ColorBasedOnPercent(decimal percent, params Color[] colors)
    {
        if (colors.Length == 0)
        {
            //I am using Transparent as my default color if nothing was passed
            return Color.Transparent;
        }
        if (percent > 1)
        {
            percent = percent / 100;
        }

        //find the two colors within your list of colors that the percent should fall between
        var colorRangeIndex = (colors.Length - 1) * percent;
        var minColorIndex = (int)Math.Truncate(colorRangeIndex);
        var maxColorIndex = minColorIndex + 1;
        var minColor = colors[minColorIndex];

        if (maxColorIndex < colors.Length)
        {
            var maxColor = colors[maxColorIndex];
            
            //get the differences between all the color values for the two colors you are fading between
            var aScale = maxColor.A - minColor.A;
            var redScale = maxColor.R - minColor.R;
            var greenScale = maxColor.G - minColor.G;
            var blueScale = maxColor.B - minColor.B;
            
            //the decimal distance of how "far" this color should be from the minColor in the range
            var gradientPct = colorRangeIndex - minColorIndex;

            //for each piece of the color (ARGB), add a percentage(gradientPct) of the distance between the two colors
            int getRGB(int originalRGB, int scale) => (int)Math.Round(originalRGB + (scale * gradientPct));

            return Color.FromArgb(getRGB(minColor.A, aScale), getRGB(minColor.R, redScale), getRGB(minColor.G, greenScale), getRGB(minColor.B, blueScale));
        }
        return minColor;
    }

If you are on python then this might help...

def rgb(p):# <-- percentage as parameter
    #Starting with color red
    d = [255,0,0]
    #formula for finding green value by percentage
    d[1] = int((510*p)/100)
    print(d[1])
    #if green value more than 255
    #set green value 255
    #reduce the red value from remaining green value
    if d[1]>255:
        d[0] -= d[1]-255
        d[1] = 255
        
    return d

print(rgb(0))

you just need to create a function with integer parameter

• input 100 will return RGB (100, 0, 0)

• input 50 will return RGB (50, 50, 0)

• input 0 will return RGB (0, 100, 0)

• input 99 will return RGB (99, 1, 0)

• input 98 will return RGB (98, 2, 0)

• input 2 will return RGB (2, 98, 0)

• input 1 will return RGB (1, 99, 0)

  private Color fader(int v){
  return Color.FromArgb(v, 100-v, 0);
  }
  

I had a need for something similar today. Input was percent from 0.0 to 1.0, and output red to green. Implementation based on jterrace's answer:

Color percentToColor(float percent)
{
    if (percent<0 || percent>1) { return Color.Black; }

    int r, g;
    if (percent<0.5)
    {
        r=255;
        g = (int)(255*percent/0.5);  //closer to 0.5, closer to yellow (255,255,0)
    }
    else
    {
        g=255;
        r = 255 - (int)(255*(percent-0.5)/0.5); //closer to 1.0, closer to green (0,255,0)
    }
    return Color.FromArgb(r, g, 0);
}

I mapped values of CPU speed between 1400 MHz and 3500 MHz to rgb() values to get from green -> yellow -> red with this function

function green_yellow_red(core_MHz, core_id){
  var core_color = ~~core_MHz.map(1400, 3500, 0, 510)

  if(core_color < 255){
	$('#cpu_core_'+core_id).css('background', 'rgb('+core_color+',255 , 0)')
  }else{
	core_color-=255
	$('#cpu_core_'+core_id).css('background', 'rgb(255 ,'+ (255-core_color) +', 0)')
  }
}

More of the same. Just Delphi Pascal coded and simplified+locked to semaphore colors (red/yellow/green).

rectangle1.Fill.Color:=DefineColorSemaphore(newcolor);

function TForm1.DefineColorSemaphore(valperc:integer):TAlphaColor;
var
   vcol: TAlphaColorRec;
begin
  vcol.B := 0;    // blue:  always 0
  vcol.A := 255;  // alpha: 255=no
  if (valperc < 50) then
    begin
       // starts @ RGB=255,0,0 and increases G 0->255
       vcol.R := 255;
       vcol.G := trunc(255*valperc/50);
    end
	else
    begin
       // starts @ RGB=255,255,0 and decreases R 255->0
       vcol.R := 255-trunc(255* (valperc - 50)/50);
       vcol.G := 255;
    end;
  result:= TAlphaColor(vcol);
end;

Recently I was planning to do samething using Javascript. I have followed two steps.

1. First scale the value in 0-1 range(scaledValue = (value - min) / (max - min))
2. Then increase value of Red channel if the value is less than or equal 0.5 and then decrease value of Green channel if the value is greater than 0.5

Here is the code I used for this purpose.

var blue = 0.0, red = 0.0, green = 0.0;

if(scaledValue <= 0.5)
{
	red = (scaledValue * 2) * 255.0;
	green = 255.0;
	blue = 0;
}else
{
	red = 255.0;
	green = 255.0 + 255.0 - ((scaledValue  * 2)* 255);
	blue = 0;
}

A sample code for showing this works in C++

This solution is inspired by @jterrace answer.

// To fill an OwnerDraw control with red-yellow-green gradient upon WM_DRAWITEM

int cx = lpDis->rcItem.right - lpDis->rcItem.left;

for (int x = 0; x < cx; x++)
{
	COLORREF cr;

	double d = 255 * 2 * (double)x/(double)cx;

	cr = x <= cx/2 ?	RGB(255,	 d,	  0) :
						RGB(255 - d, 255, 0);

	HPEN hPen = CreatePen(PS_SOLID, 1, cr);
	HPEN hOldPen = (HPEN)SelectObject(lpDis->hDC, hPen);
	MoveToEx(lpDis->hDC, x, lpDis->rcItem.top, NULL);
	LineTo(lpDis->hDC, x, lpDis->rcItem.bottom);
	SelectObject(lpDis->hDC, hOldPen);
	DeleteObject(hPen);
}

Illustration