# Linear color lerp with three colors

Hi There,

I Want to make a linear color lerp with three colors. I already figured out how to make a lerp with just two colors. Is there someone who can help me to make a ‘lerpColor()’ with three separete color values? Thanks

``````color from = color(204, 102, 0);
color to = color(0, 102, 153);
color interA = lerpColor(from, to, .33);
color interB = lerpColor(from, to, .66);
fill(from);
rect(10, 20, 20, 60);
fill(interA);
rect(30, 20, 20, 60);
fill(interB);
rect(50, 20, 20, 60);
fill(to);
rect(70, 20, 20, 60);
``````

To get you started:

``````void setup()
{
size(180, 100);
color from = color(204, 102, 0);
color to = color(0, 102, 153);
color interA = lerpColor(from, to, .33);
color interB = lerpColor(from, to, .66);
fill(from);
rect(10, 20, 20, 60);
fill(interA);
rect(30, 20, 20, 60);
fill(interB);
rect(50, 20, 20, 60);
fill(to);
rect(70, 20, 20, 60);

fill(from);
rect(10+80, 20, 20, 60);
fill(interA);
rect(30+80, 20, 20, 60);
fill(interB);
rect(50+80, 20, 20, 60);
fill(to);
rect(70+80, 20, 20, 60);
}
``````

I did not complete the code. It is just a hint.

`:)`

1 Like

Hi,

If you want to lerp with three colors, you can think of it like this :

• With two colors, if you give lerp a value of 0, then it’s the first color and 1 for the second color.

• With three colors, the first color will still be 0, the third one at 1 and the second one must be in the middle of the two so 0.5

So if it’s less than 0.5, lerp with the first and the second color and if it’s above 0.5, lerp with the second and the third color

1 Like