Colors from array running only once within draw()

Hi there guys,

Have been struggling with this piece of code. Basically creating an array of rotated rectangles in a circle. I want to use my specific color palette but since the code is in the draw() function it keeps changing the color on every frame. If I move to setup() the colors get distributed but my slider won't work.

How can I get multicolored rectangles that I can control with each rectangle having a random color pulled out from my array? Thanks!

import controlP5.*;

ControlP5 cp5;

// noise parameters
float xoff = 0.0;
float xincrement = 0.001;

// design parameters
int numberOfElements = 24;
float circularAngle = radians(360);


void setup() {
  size(1000, 1000, P3D);

  cp5 = new ControlP5(this);
  cp5.addSlider("numberOfElements")
    .setPosition(100, 50)
      .setRange(0, 255)
        ;
}


void draw() {
  background(0);
  noStroke();

  for (int i = 0; i < numberOfElements; ++i) {

    pushMatrix();

    //apply a noise or wiggle effect to the rectangles
    xoff += xincrement;
    float n = noise(xoff) * 5;

    //centre each rectangle and displace along Z-axis
    translate(width/2, height/2, 10);

    //rotate and space out equally
    rotate((circularAngle/numberOfElements)*i);

    // setting up my color array/palette
    color [] colarray = {
      #FFFFFF, #F7F7F7, #ECECEC, #333333, #0095a8, #00616f, #FF3300, #FF6600, #FFD800
    };
    int col = colarray[(int)random(0, colarray.length)];

    //ISSUE: This is where the color keeps changing on every frame as we are in draw() mode.
    //If i take the entire draw() code and put it in setup then it runs only once with no access to the slider
    //How do we get each rectangle with different colors as per my chosen color palette without changing on every frame?
    fill(col, 100);
    rect(10*n, 0, 20, 300);

    popMatrix();
  }
}