Простой вложенный цикл RGB не будет генерировать ваш красный-желтый-зеленый-синий градиент. Если это действительно то, что вы конкретно хотите, то вам следует немного узнать о цветовом круге:
red
|
magenta__ | __yellow
\|/
__/|\__
blue | green
|
cyan
На самом деле это цветовое колесо HSV, которое очень хорошо работает для понимания аддитивных цветов. В соответствии с этим, вы получаете желтый, смешивая красный и зеленый. Итак, для вашего градиента:
// in javascript:
function cssColor (r, g, b) {
return 'rgb('+r+','+g+','+b+')';
}
var colors = [];
// Start with solid red:
var r = 255;
var g = 0;
var b = 0;
// From red to yellow:
for (var g=0;g<=255;g++) colors.push(cssColor(r,g,b));
// From yellow to green:
for (var r=255;r>=0;r--) colors.push(cssColor(r,g,b));
// From green to blue:
for (var b=0;b<=255;b++,g--) colors.push(cssColor(r,g,b));
Это даст вам массив из 768 цветов. Если вы используете каждый восьмой цвет, вы должны получить массив из примерно 100 цветов:
var subColors = [];
for (var i=0;i<colors.length;i++) {
if (i%8 == 0) subColors.push(colors[i]);
}
В любом случае, используя эти знания, вы можете получить любой желаемый градиент.