colorTest.js

var canvas = document.getElementById("canvas")
  , ctx = canvas.getContext("2d")
  , x = 1, y = 1;

var colors = [
  "9DB0AC",
  "829995",
  "5D7975",
  "3E5D58",
  "18332F",

  "9ABEAA",
  "85B09A",
  "6FA287",
  "28724F",
  "205C40",
  "284734",

  "BFCEC2",
  "A7BDB1",
  "92ACA0",
  "7F9C90",
  "5C7F71",
  "43695B",

  "A1D6CA",
  "86C8BC",
  "6BBBAE",
  "006F62",
  "00594C",
  "1D3C34",

  "BAC5B9",
  "B0BDB0",
  "A3B2A4",
  "94A596",
  "708573",
  "5E7461",
  "22372B",

  "6BCABA",
  "00816D",
  "006C5B",
  "173F35",

  "789D4A",

  "B7CDC2",
  "9AB9AD",
  "789F90",
  "507F70",
  "285C4D",
  "13322B",

  "487A7B",
  "0D5257",
  "244C5A",

  "9CAF88"
];

var pantones = [
  "5507 C",
  "5497 C",
  "5487 C",
  "5477 C",
  "5467 C",

  "558 C",
  "557 C",
  "556 C",
  "555 C",
  "554 C",
  "553 C",

  "5595 C",
  "5585 C",
  "5575 C",
  "5565 C",
  "5555 C",
  "5545 C",

  "565 C",
  "564 C",
  "563 C",
  "562 C",
  "561 C",
  "560 C",

  "5665 C",
  "5655 C",
  "5645 C",
  "5635 C",
  "5625 C",
  "5615 C",
  "5605 C",

  "570 C",
  "569 C",
  "568 C",
  "567 C",

  "576 C",

  "622 C",
  "623 C",
  "624 C",
  "625 C",
  "626 C",
  "627 C",

  "7475 C",
  "7476 C",
  "7477 C",

  "7494 C",
];

var draw = function(c, p) {
  ctx.fillStyle = c;
  ctx.fillRect(200 * x, 200 * y, 100, 100);
  ctx.fillStyle = "black";
  ctx.fillText(p + " | #" + c, 200*x, 200*y);
};

for (var i = 0; i < colors.length; ++i) {
  console.log(i);
  draw(colors[i], pantones[i]);
  if (x === 5) {
    x = 1;
    ++y;
  } else {
    ++x;
  }
}