Palette Display

Displays a table of from a javascript palette.

by buzzbysalem

HTML

<h2>Color Palettes</h2>
  <ul>
    <li>defaultColorsPalette</li>
    <li>sequentialMultihueBlueYellowPalette</li>
    <li>sequentialSingleHueVioletPalette</li>
  </ul>
  <table id="Palette">
    <tbody></tbody>
  </table>

JavaScript

//via paletteton - complementary bright
var defaultColorsPalette = ["#ffd99a", "#225ea8", "#ffc09a", "#9dc4f4", "#ffbf58", "#ffdb58", "#257294", "#ff9658", "#61a1f3", "#ffa719", "#ffce19", "#ff6e19", "#ffe99a", "#2a82f2", "#ff9e00", "#ffc900", "#ff5f00", "#036bf0"];
//via colorweb2
var sequentialMultihueBlueYellowPalette = ["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"];
//via colorweb2

var sequentialSingleHueVioletPalette = ["#d6c8e4", "#887caf", "#dadaeb", "#bcbddc", "#9e9ac8", "#2E1483", "#6a51a3", "#54278f", "#3f007d"];

function addTableRowofColors(array, $row) {
  for (var jj = 0; jj < array.length; jj++) {
    var row = "<td style='width:80px; background-color:" + array[jj] + " '>" + array[jj];
    $row.append(row);
  }
  return $row;
}

function dumpPalettes() {
  var palettes = [defaultColorsPalette, sequentialMultihueBlueYellowPalette, sequentialSingleHueVioletPalette];
  var $table = $("#Palette").find('tbody');
  var $row = $table;
  for (var ii = 0; ii < palettes.length; ii++) {
    var pal = palettes[ii];
    $row = $table.append("<tr>").append(addTableRowofColors(pal, $row)).append("</tr>");
  }
  dumpPalettes();
}