# How to fade between multiple colors?

**URL:** <https://discourse.processing.org/t/how-to-fade-between-multiple-colors/31968>\
**Category:** Coding Questions\
**Created:** [August 27, 2021, 1:12pm UTC](https://discourse.processing.org/t/how-to-fade-between-multiple-colors/31968 "2021-08-27T13:12:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jimjimmer](https://avatars.discourse-cdn.com/v4/letter/j/67e7ee/32.png) [@jimjimmer](https://discourse.processing.org/u/jimjimmer)\
**Post date:** [August 27, 2021, 1:12pm UTC](https://discourse.processing.org/t/how-to-fade-between-multiple-colors/31968/1 "2021-08-27T13:12:30Z")

</div>

Hi I can understand how to fade from one color (and back again) using code such as the one bellow.  
But what if I want to move through a series of 3 or more color’s? Have you managed it??  
;

```auto
void setup() {
  size ( 300, 300);
}

void draw() {
  fill (lerpColor(color(255, 0255, 0), color(0, 55, 100), (((millis()/5000)%2==0)?millis()%5000:5000-millis()%5000)/5000.0));

  ellipse(150, 150, 150, 150);
}

```

---

<div class="post-metadata">

**Author:** ![raron](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/raron/32/13651_2.png) [@raron](https://discourse.processing.org/u/raron)\
**Post date:** [August 27, 2021, 3:45pm UTC](https://discourse.processing.org/t/how-to-fade-between-multiple-colors/31968/2 "2021-08-27T15:45:36Z")

</div>

Hi.

Quick’n’dirty pseudo-code off the top of my head

```auto
limit = 0.5; // or somwhere between 0.0 and 1.0.
fade = some value between 0.0 to 1.0
if (fade < limit) color = lerpColor(color1, color2, fade/limit);
else color = lerpColor(color2, color3, (fade-limit)/(1-limit));
fill (color);
etc..

```

So just use more lerpColor statements.  
For more colors you can expand on several [if-else if](https://processing.org/reference/else.html) (or just [if](https://processing.org/reference/if.html)) sections.  
Or something like that.  
Nice millis trick btw.

---

<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:** [August 27, 2021, 5:00pm UTC](https://discourse.processing.org/t/how-to-fade-between-multiple-colors/31968/3 "2021-08-27T17:00:18Z")

</div>

Hello,

Example with frameCount as the timer:

```auto
void setup() 
  {
  size ( 300, 300);
  }

void draw() 
  {
  if (frameCount >= 0 && frameCount < 5*60)    
    {  
    color c = lerpColor(color(255, 255, 0), color(0, 55, 100), (frameCount - 0)/float(5*60));  
    fill (c);
    } 
 
  if (frameCount >= 5*60 && frameCount < 10*60)    
    {  
    color c = lerpColor(color(0, 55, 100), color(0, 255, 255), (frameCount-5*60)/float(5*60));  
    fill (c);
    }   
  
  ellipse(150, 150, 150, 150);
  }

```

It needs some work… I will leave that with you.

`:)`

---

<div class="post-metadata">

**Author:** ![Ov3rM1nD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ov3rm1nd/32/1756_2.png) [@Ov3rM1nD](https://discourse.processing.org/u/Ov3rM1nD)\
**Post date:** [August 27, 2021, 7:04pm UTC](https://discourse.processing.org/t/how-to-fade-between-multiple-colors/31968/4 "2021-08-27T19:04:10Z")

</div>

Not exactly the answer but i’m gonna put this here anyway in case it helps

```auto
int max = 1000;

void setup() {
  size(400, 200);
  colorMode(HSB, max, 1, 1);
}

void draw() {
  color hue = color(frameCount % max, 1, 1);
  background(hue);
}

```

---

<div class="post-metadata">

**Author:** ![jimjimmer](https://avatars.discourse-cdn.com/v4/letter/j/67e7ee/32.png) [@jimjimmer](https://discourse.processing.org/u/jimjimmer)\
**Post date:** [August 27, 2021, 7:28pm UTC](https://discourse.processing.org/t/how-to-fade-between-multiple-colors/31968/5 "2021-08-27T19:28:46Z")

</div>

Thanks so much guys definitely on the right path now 🙂🙂