title: What's the correct math to fade a color?
body: <p>I'm trying to fade a color, let's say <code>Yellow</code> to <code>White</code> over a period of time. I've got the timer worked out, and I'm applying the new color just fine as well, but the fade isn't smooth <strong>(e.g. it fades into some weird colors before it gets to <code>White</code>, some of which are darker than their predecessor on the "fade chain" let's call it)</strong>. I'm confident that's because the math is wrong, but I just can't seem to find a good example of the math for me to modify what I'm doing.</p>
  
  <p>I even pulled the basics of the <code>ColorCeiling</code> code from this question: <a href="https://stackoverflow.com/questions/710902/fade-a-color-to-white-increasing-brightness?rq=1">Fade a color to white (increasing brightness)</a></p>
  
  <p>Right now I take a color, and call an extension method <code>Increase</code>:</p>
  
  <pre><code>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));
  }
  </code></pre>
  
  <p>and as you can see, each color is then modified by an offset with a ceiling in mind to keep exceptions from being thrown. That extension method, <code>ColorCeiling</code> looks like this:</p>
  
  <pre><code>public static int ColorCeiling(this byte val, byte modifier, byte ceiling = 255)
  {
      return (val + modifier &gt; ceiling) ? ceiling : val + modifier;
  }
  </code></pre>
  
  <p>Now, I'm confident that <code>ColorCeiling</code> is the problem, but I honestly just can't find the math. I honestly feel like just incrementing the ARGB is almost certainly the wrong approach, it seems like you'd say I want you to be 50% lighter, but I just don't know what that means as far as code.</p>