Swatches

var paper = '#EDEBE7';
var margin = 60;

var rows = 12;
var columns = 12;

s.rect(0, 0, width, height).attr({fill: paper});

function hsl(h, sat, l){
  h = ((h % 360) + 360) % 360;
  var c = (1 - Math.abs(2 * l - 1)) * sat;
  var x = c * (1 - Math.abs((h / 60) % 2 - 1));
  var m = l - c / 2;
  var rgb = h < 60 ? [c, x, 0] : h < 120 ? [x, c, 0] : h < 180 ? [0, c, x] :
            h < 240 ? [0, x, c] : h < 300 ? [x, 0, c] : [c, 0, x];
  return '#' + rgb.map(function(v){
    var n = Math.round((v + m) * 255).toString(16);
    return n.length == 1 ? '0' + n : n;
  }).join('');
}

var cell = (width - margin * 2) / columns;

// Rows walk the spectrum from red at the top round to violet at the bottom.
var start = getRandomInt(-15, 15);
for (var r = 0; r < rows; r++){
  var rowHue = start + r / rows * 290;
  var c = 0;
  while (c < columns){
    // A run of chips from one paint strip: a hue close to the row's, stepping
    // from pale and chalky to deep and saturated, sometimes the other way.
    var run = Math.min(getRandomInt(3, 6), columns - c);
    if (columns - c - run < 3) { run = columns - c; }
    var hue = rowHue + getRandomInt(-12, 12);
    var muted = getRandomInt(0, 9) == 0;
    var flip = getRandomInt(0, 2) == 0;
    for (var k = 0; k < run; k++){
      var t = run == 1 ? 0.5 : k / (run - 1);
      if (flip) { t = 1 - t; }
      var sat = (muted ? 0.08 : 0.22) + t * (muted ? 0.12 : 0.33);
      var light = 0.84 - t * 0.52;
      s.rect(margin + (c + k) * cell, margin + r * cell, cell + 0.5, cell + 0.5)
        .attr({fill: hsl(hue, sat, light)});
    }
    c += run;
  }
}