What correct math fade with color?

Question

I am trying to fade out a color, say Yellow to White for a certain period of time. I have a timer, and I also apply a new color, but the fading is not smooth (for example, it disappears in some strange colors before it falls into White , some of which are darker than their predecessor on the “fade chain”, let him be called) . I am sure that since the math is wrong, but I just can't find a good math example for me to change what I am doing.

I even pulled the basics of the ColorCeiling code from this question: Wither color to white (increase brightness)

Now I take the color and call the Increase extension method:

 dataGridViewResults.Rows[0].DefaultCellStyle.BackColor.Increase(50); public static Color Increase(this Color color, byte offset) { return Color.FromArgb( color.A.ColorCeiling(offset), color.R.ColorCeiling(offset), color.G.ColorCeiling(offset), color.B.ColorCeiling(offset)); } 

and, as you can see, each color is then changed by offset with the ceiling to eliminate exceptions. This ColorCeiling extension method is as follows:

 public static int ColorCeiling(this byte val, byte modifier, byte ceiling = 255) { return (val + modifier > ceiling) ? ceiling : val + modifier; } 

Now I am sure that the problem is ColorCeiling , but I honestly just can not find the math. I honestly feel that just building ARGB is almost certainly the wrong approach, it looks like you would say that I want you to be 50% lighter, but I just don't know what that means for code.

Answer 1

Here is an idea that might work.

Do not do math in red-green-blue space. Instead, treat your color as having three components:

• Hue (red, orange, yellow, green, blue, purple, etc.),
• Saturation (how intense is the color?)
• Value (how much black is in color?)

There are conversion algorithms from RGB to HSV; Look at them. This is a good place to start:

http://en.wikipedia.org/wiki/HSL_and_HSV

Now that you are fading from one color to another, follow the steps on the HSV axes, not the RGB axes.

Answer 2

Gradient is what you are looking for. You will have to separate them and recompile them like this.

 int rMax = Color.Yellow.R; int rMin = Color.White.R; int bMax = Color.Yellow.B; int bMin = Color.White.B; int gMax = Color.Yellow.G; int gMin = Color.White.G; var colorList = new List<Color>(); for(int i=0; i<size; i++) { var rAverage = rMin + (int)((rMax - rMin) * i / size); var bAverage = bMin + (int)((bMax - bMin) * i / size); var gAverage = gMin + (int)((gMax - gMin) * i / size); colorList.Add(Color.FromArgb(rAverage, gAverage, bAverage)); } 

Answer 3

Percentage means multiplication, not addition. In my really simple JavaScript color class , I do such things by defining two colors and mixing RGB sizes.

From my Color class:

 this.getBlendedColor = function(color, percent) { // limit percent between 0 and 1. // this percent is the amount of 'color' rgb components to use var p = percent > 0 ? percent : 0; p = p < 1 ? p : 1; // amount of 'this' rgb components to use var tp = 1 - p; // blend the colors var r = Math.round(tp * this.r + p * color.r); var g = Math.round(tp * this.g + p * color.g); var b = Math.round(tp * this.b + p * color.b); // return new color object return new Color(r, g, b); } // getBlendedColor () 

So, if you have color C and you want to get it 50% whiter, you would do this:

 var newColor = c.getBlendedColor(new Color('#ffffff'), 0.50); 

If you use an alpha channel, it can be explicitly turned on without any problems - both colors in your example probably have 100% opacity.

Gradient example using simple RGB color mixing math: http://jsfiddle.net/2MymY/1/

Answer 4

Here is some code that I use to fade from one color to another in the RGB color space. This works well for my purposes. You may need to adapt it to return the colors in steps. Currently for each i you will have curClr , i.e. i/discreteUnits percent between baseClr and fadeTo .

 int discreteUnits = 10; Color fadeTo = Color.Green; Color baseClr = Color.Red; float correctionFactor = 0.0f; float corFactorStep = 1.0f / discreteUnits; for(int i = 0; i < discreteUnits; i++) { correctionFactor += corFactorStep; float red = (fadeTo.R - baseClr.R) * correctionFactor + baseClr.R; float green = (fadeTo.G - baseClr.G) * correctionFactor + baseClr.G; float blue = (fadeTo.B - baseClr.B) * correctionFactor + baseClr.B; Color curClr = Color.FromArgb(baseClr.A, (int)red, (int)green, (int)blue); } 

Subscribe to this site to give me a starting place: http://www.pvladov.com/2012/09/make-color-lighter-or-darker.html