This is where it gets complicated 
Colors represented in RGB, which is what fill() is using, uses 3 color components to create a full color. The 3 components are Red, Green, and Blue, hence the R, G, and B. In 24 bit color, this allows for 256 values for each component, or values of 0 - 255. 24 bit color means there are 24 bits involved or 2^24 which is 16777216. This is the same as 256 * 256 * 256. Each color given 8 bits, or 2^8, which is 256.
For fill() each argument is a component value of the RGB color. The first is Red, the second is Green, and the third is Blue. If you set any one of these values to its max value 255 and the others to 0, you’ll get a color that is all that color
fill(255, 0, 0) // full red
fill(0, 255, 0) // full green
fill(0, 0, 255) // full blue
If you don’t give any component any color, it makes black
fill(0, 0, 0) // full black
And combinations of the values gives other colors
fill(255, 255, 0) // yellow (red + green)
fill(0, 255, 255) // cyan (green + blue)
fill(255, 0, 255) // magenta (red + blue)
All full colors make white
fill(255, 255, 255) // full white
And of course anything in between 0 and 255 for each component, if the same, will make grays
fill(50,50,50) // dark gray
fill(128, 128, 128) // middle gray
fill(200,200,200) // light gray
If you have a loop with a value of i that goes from 0 to some other value, and you want to convert that to colors, you would need to figure out how to do that. There is no easy way to say, hey, i is now one greater, so give me the next color, because there i no standard for what that next color would be and everyone’s idea for what the next color should be could be different.
Since you already have an idea of what your colors should be, I’d suggest putting those values in an array and then getting them out in your loop. Just like you can get your titles out from your other array of objects, you can get colors out of a color array.
var colors = [
{ r: 201, g: 235, b: 160 },
{ r: 229, g: 179, b: 231 },
{ r: 169, g: 180, b: 243 }
]
for(var i = 0; i < 3; i++) {
fill(colors[i].r, colors[i].g, colors[i].b)
// ...
Here the r, g, and b properties of the objects in the colors array map to the arguments used in fill(). Then in the loop, you get the current color for that loop iteration using colors[i] and reference those r, g, and b properties for each argument of the fill() call.
- so anyhow, here is the second block of code but it doesn’t do it for me either