# Linear color lerp with three colors

**URL:** <https://discourse.processing.org/t/linear-color-lerp-with-three-colors/29269>\
**Category:** Coding Questions\
**Created:** [April 10, 2021, 9:41pm UTC](https://discourse.processing.org/t/linear-color-lerp-with-three-colors/29269 "2021-04-10T21:41:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jaspervb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jaspervb/32/10571_2.png) [@jaspervb](https://discourse.processing.org/u/jaspervb)\
**Post date:** [April 10, 2021, 9:41pm UTC](https://discourse.processing.org/t/linear-color-lerp-with-three-colors/29269/1 "2021-04-10T21:41:26Z")

</div>

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

```auto
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);

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 10, 2021, 10:41pm UTC](https://discourse.processing.org/t/linear-color-lerp-with-three-colors/29269/2 "2021-04-10T22:41:20Z")

</div>

To get you started:

```auto
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);
  }

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4528affe535409818916ace89818f2cff31c92d5.png)

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fcf1daed9fa186f2883ed7487a75faa8189ca837.png)

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

`:)`

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [April 10, 2021, 10:44pm UTC](https://discourse.processing.org/t/linear-color-lerp-with-three-colors/29269/3 "2021-04-10T22:44:31Z")

</div>

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 😉