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. here is my code. It doesn't make yellow color.

for (int i = 0; i < img.Rows; i++)
{
    for (int j = 0; j < img.Cols; j++)
    {
        GazeMap[i, j] = (GazeMap[i, j] - MinNumber) / (MaxNumber - MinNumber);
    }
}
double red, green, blue = 0;

for (int i = 0; i < img.Rows; i++)
{
    for (int j = 0; j < img.Cols; j++)
    {
        red = 255 * GazeMap[i, j];
        green = 255 * (1 - GazeMap[i, j]);
        img[i, j] = new Rgb(red, green, blue);
    }
}

Well, yellow is 255 R, 255 G, so you would need to increase green until you reach 255, and then decrease red until you hit 0. For your example, you need to adjust the values but the idea is the same :) Alternatively you could use an [HSV colour model](https://en.wikipedia.org/wiki/HSL_and_HSV). — ProgrammingLlama, Aug 28 '18 at 07:58
You can use this [RGB values of visible spectrum](https://stackoverflow.com/a/22681410/2521214) with looping `wavelength` — Spektre, Aug 28 '18 at 07:58
[Here](https://stackoverflow.com/questions/33496284/extract-colour-gradient-pixel-information/33497399?s=3|42.0637#33497399) is a function to interpolate any number of colors smoothly. — TaW, Aug 28 '18 at 08:10

score 2 · Answer 1 · answered Aug 28 '18 at 08:26

You need to fade from 255,0,0 (red) to 255,255,0 (yellow) and then to 0,255,0 (green)

I'd do this as two loops, the first one fades from red to yellow over the fist half of the image, the other from yellow to green over the other half.

for (int i = 0; i < img.Rows; i++)
{     
   for (int j = 0; j < img.Cols / 2; j++)
   {
       img[i, j] = new Rgb(255, 255 * 2 * (double)j / img.Cols, 0);
   }
}  

for (int i = 0; i < img.Rows; i++)
{     
   for (int j = img.Cols / 2; j < img.Cols; j++)
   {
       img[i, j] = new Rgb(255 - (255 * 2 * (double)j / img.Cols), 255, 0);
   }
}

Note that you have to cast j to a double, or the calculation will get rounded off.

Also, it would be more efficient to calculate the color once per row, rather than for every pixel.

Actually, it would be much more efficient to use the graphics library to generate a gradient brush, and use that to fill the image.

score 1 · Answer 2 · edited Aug 28 '18 at 23:12

I do not know about GazeMap, but I am just sharing the logic/pseudo code.

Red rgb(255,0,0) Yellow rgb(255,255,0) Green rgb(0,128,0)

i is Red j is Green

Start from j with 255 till mid increasing by 1. Do not change i From mid to end decrease j by .5 and i by 1

double red, green, blue = 0;

for (int j = 0; j < img.Cols; j++)
{
    red = 255;
    green = green + 1;
    img[i, j] = new Rgb(red, green, blue);
}

for (int i = 0; i < img.Rows; i++)
{
    for (int j = 0; j < img.Cols; j++)
    {
        red = red - 1;
        green = green - .5;
        img[i, j] = new Rgb(red, green, blue);
    }
}

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

2 Answers2