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.

回答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.

回答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 red 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

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

回答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