codice:
$(document).ready(function() {
//Setup background color arrays
var backgroundColors = new Array();
backgroundColors = [ ["#D6E9DB", "#3F7342", "#51655E", "#99C68B", "#7A00F5", "#F500F5", "#00F5F5", "#3399FF", "#70B8FF", "#F5007A", "#00F57A", "#FFB870", "#FF9933", "#F50000", "#00F500", "#F5F500", "#F57A00"],
["#30C0C8", "#292D31", "#EDE7DB", "#CFC3B5", "#A29585", "#795A55", "#11B5C1", "#2F7082", "#1D3B46", "#010101"],
["#B84A7C", "#292D31", "#979FE0", "#C7CFF6", "#FFA6A6", "#FFC6C5", "#D67FAC", "#C4D58D", "#DCE8B6", "#FACD92", "#FFE7B1"],
["#265799", "#292D31", "#4C75A1", "#235999", "#4576AE", "#0B224C", "#14356B", "#0A214D", "#94B9E6", "#759ED4", "#31619F"]];
//Set color scheme
var currentScheme = Math.floor(Math.random()*4);
var currentSchemeLength = backgroundColors[currentScheme].length;
//Set link color
$("body a").css("color", backgroundColors[currentScheme][0]);
//Set square background color
$("#blog_background").css("background-color", backgroundColors[currentScheme][0]);
//Set footer link color
$("#footer a").css("color", backgroundColors[currentScheme][0]);
//Set # of squares
var squareCount = 80;
//Loop
for (var i=0; i < squareCount; i++){
//Set olumns
boxColumn = i * 125;
//Create rows and columns
$("#blog_background").append("<div class='background_box' id='background_box_" + i + "'></div>")
$("#background_box_" + i).css({'background-color' : backgroundColors[currentScheme][Math.floor(Math.random()*currentSchemeLength)]})
}
});
che in pratica genera dei box di dimensioni fisse e li riempie con dei colori di sfondo che ho precedentemente dichiarato con delle palette, in modo casuale. Quello che vorrei, è poter sostituire quell'array contenente le palette di colori con un solo colore per volta facendo in modo che, automaticamente, gli altri box andassero a riempirsi con i colori derivanti dalla scala monocromatica del colore di partenza. Un pò come succede su questo sito: