# How do I fade any color without loosing the integrity of it?

Hello again, this time I will try not ridicule myself! xD

I wanted to know how to fade a color to black. Lets say I have this code:

``````
ofSetColor(fRed, fGreen, fBlue);
ofRect(fRed,fGreen,fBlue);

``````

I want the rectangle to go from black (0,0,0) to color (255,170,85) and back.
If I use a linear “method” for each RGB component (by updating their variables -=1 on every frame), Blue will reach 0 first followed by Green and then Red. On theses steps the type of color changes are noticeable, first a dark red, then a yellowish color, etc. (I think that was the sequence I saw)

So, how to I fade to black a color without loosing the “integrity” of the faded color?

I think the easiest way to do this is to mix the two things you want using a percentage.

for example, 50% between black and the color you want:

``````

float r = 0.5 * 0 + 0.5 * 255;
float g = 0.5 * 0 + 0.5 * 170;
float b = 0.5 * 0 + 0.5 * 85;

``````

if you want to be 25% (25% of the color, 75% of black), it would look like:

``````

float r = 0.75 * 0 + 0.25 * 255;
float g = 0.75 * 0 + 0.25 * 170;
float b = 0.75 * 0 + 0.25 * 85;

``````

you’ll notice the formula is something like:

(1-pct) * a + (pct) * b;

which is how you can linearly interpolate from a to b, when you are at 0%, you are at a, when you are at 100%, you are at b, and with pcts between you move from a to b.

hope this helps!

take care,
zach

Yes, sure it helps!
I bet there are a few different methods for moving around colors spaces, but the one you posted is just what I need.

Thanks again.