causeway-standard-theme/causeway/docs/color-palette.html

<!--(bake includes/header.html)-->
<div class="container page">
  <div class="content pane single-pane">
    <section>
      <a id="color-palette"></a>
      <header class="content-header">
        <h1 class="title">
          Color Palette </h1>
      </header>
      <div id="colors" class="clearfix"></div>
    </section>
  </div>
</div>
<!--(bake includes/footer.html)-->

<script>
  //  color palette
  var colorPalette = {
    'black': {
      "@black005": "#f2f2f2",
      "@black010": "#e5e7e9",
      "@black020": "#cccccc",
      "@black030": "#b2b2b2",
      "@black040": "#999999",
      "@black050": "#7f7f7f",
      "@black060": "#666666",
      "@black070": "#4c4c4c",
      "@black080": "#333333",
      "@black090": "#191919",
      "@black100": "#000000"
    },
    'grey': {
      "@cool-grey045": "#f9f9f9",
      "@pale-grey": "#ebebeb",
      "@blue-grey2": "#ecf0f4",
      "@blue-grey1": "#dee6ed",
      "@cool-grey": "#bdc3c7",
      "@warm-grey": "#7f8c8d",
      "@grey": "#464440"
    },
    'blue': {
      "@enterprise-blue010": "#eff4fc",
      "@enterprise-blue020": "#e0e9fa",
      "@causeway-blue-30": "#d2dce5",
      "@causeway-blue-50": "#b4c5d4",
      "@causeway-blue": "#7d9db6",
      "@causeway-deep-blue": "#47627d",
      "@enterprise-blue": "#6391e4",
      "@enterprise-blue085": "#7aa1e8",
      "@enterprise-dark-blue": "#3872dc",
      "@blue": "#0870cf"
    },
    'others': {
      "@white": "#ffffff",
      "@mauve": "#8e44ad",
      "@red": "#c0392b",
      "@deep-orange": "#d35400",
      "@deep-orange085": "#da6d26",
      "@causeway-orange": "#e67e22",
      "@yellow": "#e7b747",
      "@brown": "#996633",
      "@green": "#16a085"
    }
  };

  function populateColors(selectorID, colorObject) {

    var colorHolder = $(selectorID);

    for (var colorGroup in colorObject) {
      if (colorObject.hasOwnProperty(colorGroup)) {

        var colorList = $('<ul/>');
        var colorGroupObject = colorObject[colorGroup];

        for (var color in colorGroupObject) {
          var classWhite = colorGroupObject[color].indexOf("ffffff") > 0 ? " class='color-white'": '';
          colorList.append(
            "<li" + classWhite + ">" +
            "<span class='color-description'>" + color + "</span>" +
            "<span class='color-swatch' style='background-color:" + colorGroupObject[color] + " '></span>" +
            "<span class='color-value'>" + colorGroupObject[color] + "</span>" +
            "</li>"
          );
        }

        colorHolder.append(colorList);

      }
    }
  }
  populateColors('#colors', colorPalette);
</script>