Algorithm: How do I fade from Red to Green via Yellow using RGB values?
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.