Color interpolation between 3 colors

Question

I use the following equation to get a nice color gradient from colorA to colorB, but I have no idea how to do the same for 3 colors, so the gradient goes from colorA to colorB to colorC

colorT = colorA * p + colorB * (1.0 - p); where "p" is the a percentage from 0.0 to 1.0

Thanks

Answer 1

Thanks for the formula. But I had to make some modifications to it, as it didn't interpolate between the 3 colors properly (there was jumps in color change)

Here is the fix for that:

if (p < 0.5)
        {
            COLORx = (COLORb * p * 2.0) +  COLORa * (0.5 - p) * 2.0;
        }
        else
        {
            COLORx = COLORc * (p - 0.5) * 2.0 + COLORb * (1.0 - p) * 2.0;          
        }

Answer 2

Well, for 3 colors, you can just to the same with p = 0.0 to 2.0:

if p <= 1.0
  colorT = colorA * p + colorB * (1.0 - p);
else
  colorT = colorB * (p - 1.0) + colorC * (2.0 - p);

Or scale it so you can still use p = 0.0 to 1.0:

if p <= 0.5
  colorT = colorA * p * 2.0 + colorB * (0.5 - p) * 2.0;
else
  colorT = colorB * (p - 0.5) * 2.0 + colorC * (1.0 - p) * 2.0;

Answer 3

It might be possible to construct a single expression for that, but the simplest is to use a condition to use different expressions depending on whether you are in the A - B part or B - C part of the range:

colorT =
  p < 0.5
    ? colorA * p * 2.0 + colorB * (1.0 - p * 2.0)
    : colorB * (p - 0.5) * 2.0 + colorC * (1.0 - (p - 0.5) * 2.0);