diff --git a/grayscale.html b/grayscale.html
new file mode 100644
index 0000000..33942cd
--- /dev/null
+++ b/grayscale.html
@@ -0,0 +1,121 @@
+<html>
+  <head>
+    <style type="text/css">
+     * { font-family: Helvetica, Arial, sans-serif; }
+
+     table {
+         display: inline-block;
+         margin-right: 30px;
+     }
+    </style>
+  </head>
+  <body>
+    <table>
+      <thead>
+        <th colspan="3">grayscale</th>
+      </thead>
+      <thead>
+        <th>var</th>
+        <th>color</th>
+        <th>hex</th>
+      </thead>
+      <tbody id="grayscale-colors">
+        <tr>
+          <td>fg1</td>
+          <td bgcolor="#000000"></td>
+          <td>#000000</td>
+        </tr>
+      </tbody>
+    </table>
+    <table>
+      <thead>
+        <th colspan="3">original</th>
+      </thead>
+      <thead>
+        <th>var</th>
+        <th>color</th>
+        <th>hex</th>
+      </thead>
+      <tbody id="original-colors">
+        <tr>
+          <td>fg1</td>
+          <td bgcolor="#000000"></td>
+          <td>#000000</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <script type="text/javascript">
+     var grayscale = [
+         ["fg1", "#000000"],
+         ["fg2", "#191919"],
+         ["fg3", "#2a2a2a"],
+         ["fg4", "#3b3b3b"],
+         ["bg1", "#ffffff"],
+         ["bg2", "#e8e8e8"],
+         ["bg3", "#d1d1d1"],
+         ["bg4", "#bbbbbb"],
+         ["key2", "#818181"],
+         ["key3", "#666666"],
+         ["builtin", "#bfbfbf"],
+         ["keyword", "#737373"],
+         ["const",   "#737373"],
+         ["comment", "#bfbfbf"],
+         ["func",    "#bfbfbf"],
+         ["str",     "#bfbfbf"],
+         ["type",    "#bfbfbf"],
+         ["var",     "#737373"],
+         ["warning", "#bfbfbf"]
+     ];
+
+     var original = [
+         ["fg1", "#0F380D"],
+         ["fg2", "#22461e"],
+         ["fg3", "#34552f"],
+         ["fg4", "#466440"],
+         ["bg1", "#9BBC0F"],
+         ["bg2", "#8eab13"],
+         ["bg3", "#819b15"],
+         ["bg4", "#748b17"],
+         ["key2", "#457043"],
+         ["key3", "#2a552a"],
+         ["builtin", "#2E602E"],
+         ["keyword", "#2E602E"],
+         ["const",   "#2E602E"],
+         ["comment", "#8BAC0F"],
+         ["func",    "#2E602E"],
+         ["str",     "#0F380D"],
+         ["type",    "#2E602E"],
+         ["var",     "#2E602E"],
+         ["warning", "#8BAC0F"]
+     ];
+
+     var grayscaleColorsBody = document.getElementById('grayscale-colors');
+     var originalColorsBody = document.getElementById('original-colors');
+
+     var printTable = function(scheme, tbody) {
+         [].forEach.call(scheme, function(item) {
+             var tr = document.createElement('tr');
+             var td1 = document.createElement('td');
+             td1.textContent = item[0];
+
+             var td2 = document.createElement('td');
+             td2.style.backgroundColor = item[1];
+
+             var td3 = document.createElement('td');
+             td3.textContent = item[1];
+
+             tr.appendChild(td1);
+             tr.appendChild(td2);
+             tr.appendChild(td3);
+
+             tbody.appendChild(tr);
+         });
+     };
+
+     printTable(grayscale, grayscaleColorsBody);
+     printTable(original, originalColorsBody);
+
+    </script>
+  </body>
+</html>
