# Gradient Loop Help

**URL:** <https://discourse.processing.org/t/gradient-loop-help/11608>\
**Category:** Coding Questions\
**Created:** [May 26, 2019, 1:53pm UTC](https://discourse.processing.org/t/gradient-loop-help/11608 "2019-05-26T13:53:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bobby](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@Bobby](https://discourse.processing.org/u/Bobby)\
**Post date:** [May 26, 2019, 1:53pm UTC](https://discourse.processing.org/t/gradient-loop-help/11608/1 "2019-05-26T13:53:07Z")

</div>

I am trying to make a background where the screen has rectangles that differ in shades of blue. I have tried putting my colours into an array (ik it not efficient), but i only result to getting 1 shade of blue for all rectangles.

```auto
color[] blues = {#00038E,#0205A0,#0206B7,#0408C9,#0207E5,#0005F5,#0068F5,#217EFC,#3B8EFF};

size(500,500);

for(int n=0; n<blues.length; n++){ //supposed to change colours of each rectangle
  for(int i=0; i<480; i+=50){ //creates rectangles 
  fill(blues[n]);
  rect(0,i,width,50);
}
}

```

ive tried not using an array and instead having it so the ‘b’ value in fill(r,g,b) increases through a loop, but i just end up with same result- only 1 shade of blue

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 26, 2019, 2:09pm UTC](https://discourse.processing.org/t/gradient-loop-help/11608/2 "2019-05-26T14:09:51Z")

</div>

try like

```auto
color[] blues = {#00038E,#0205A0,#0206B7,#0408C9,#0207E5,#0005F5,#0068F5,#217EFC,#3B8EFF};

size(500,500);
for(int n=0; n<blues.length; n++){ //supposed to change colours of each rectangle
  fill(blues[n]);
  rect(0,n*50,width,50);
}

```

your FOR FOR loop might just show you the last color

---

<div class="post-metadata">

**Author:** ![Bobby](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@Bobby](https://discourse.processing.org/u/Bobby)\
**Post date:** [May 26, 2019, 2:14pm UTC](https://discourse.processing.org/t/gradient-loop-help/11608/3 "2019-05-26T14:14:46Z")

</div>

> [@kll](#):
>
> color blues = {#00038E,#0205A0,#0206B7,#0408C9,#0207E5,#0005F5,#0068F5,#217EFC,#3B8EFF}; size(500,500); for(int n=0; n\<blues.length; n++){ //supposed to change colours of each rectangle fill(blues[n]); rect(0,n\*50,width,50);

omg i didnt think of n\*50.  
Dude you’re an actual legend  
Thank you for all the help 👍

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [May 26, 2019, 9:12pm UTC](https://discourse.processing.org/t/gradient-loop-help/11608/4 "2019-05-26T21:12:22Z")

</div>

> [@Bobby](#):
>
> I have tried putting my colours into an array (ik it not efficient),

you can try lerpColor() function

```auto
void setup() {
  color blue = color(0,0, 255);
  color white = color(255);

  size(500, 500);
  final int step = 50;
  
  for (int n=0; n<height; n+= step) { //supposed to change colours of each rectangle
    color c = lerpColor(blue, white, (float)n/height);
    fill(c);
    rect(0, n, width, step);
  }
}

```