rgbcolorshtml.js

var notice = '\n' +
 '   Copyright 2013 Michinobu Maeda\n' +
 '\n' +
 '   Licensed under the Apache License, Version 2.0 (the "License");\n' +
 '   you may not use this file except in compliance with the License.\n' +
 '   You may obtain a copy of the License at\n' +
 '\n' +
 '       http://www.apache.org/licenses/LICENSE-2.0\n' +
 '\n' +
 '   Unless required by applicable law or agreed to in writing, software\n' +
 '   distributed under the License is distributed on an "AS IS" BASIS,\n' +
 '   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n' +
 '   See the License for the specific language governing permissions and\n' +
 '   limitations under the License.\n';

var myhome = "https://sites.google.com/site/michinobumaeda/";

var jsdom = require("jsdom");
var document = jsdom.jsdom("<html/>");

console.log((function () {
  // root element
  var html = document.getElementsByTagName("html").item(0);
  // doctype: html5
  document.insertBefore(document.implementation.createDocumentType("html"), html);
  // comment: notice
  document.insertBefore(document.createComment(notice), html);
  // element: head
  html.appendChild(
    element("head", [
      element("meta",
        attribute("charset", "utf-8")
      ),
      element("meta", [
        attribute("http-equiv", "content-type"),
        attribute("content", "text/html; charset=UTF-8")
      ]),
      element("title", "RGB Colors"),
      element("script", [
        attribute("type", "text/javascript"),
        document.createComment("\n" +

// client side scripts
function setCaption(id, r, g, b) {
  document.getElementById(id).replaceChild(
    document.createTextNode(
      "rgb(" + r + "," + g + "," + b + ") #" + toHex(r) + toHex(g) + toHex(b)
    ),
    document.getElementById(id).lastChild
  );
} + "\n" +

function resetCaption(id) {
  document.getElementById(id).replaceChild(
    document.createTextNode("\u00a0"),
    document.getElementById(id).lastChild
  );
} + "\n" +

function toHex(v) {
  return ('0' + v.toString(16)).slice(-2).toUpperCase();
} + "\n" +

      "// ")]) // --></script>
    ]) // </head>
  );

  // element: body
  html.appendChild(
    element("body", [
      style({
        "background-color": rgb(256 / 2 - 1, 256 / 2 - 1, 256 / 2 - 1)
      }),

      element("h1", [
        style({
          "margin": "0",
          "font-family": monospace(),
          "color": "white"
        }),
        "RGB Colors"
      ]), // </h1>

      // outer table (4 x 4)
      element("table", [
        style({
          "font-family": monospace(),
          "border": "none",
          "clear": "both",
          "padding": "0"
        }),
        function () {
          var cnl = [];
          for (var row = 0; row < 4; ++row) {

            cnl.push(element("tr", (
              function () {
                var cnl = [];
                for (var col = 0; col < 4; ++col) {
                  var r = 255 - (row * 4 + col) * 17;

                  cnl.push(element("td",

                    // inner table (255 / 17) x (255 / 17)
                    element("table", (
                      function () {
                        var cnl = [
                          on("mouseout", "resetCaption", ["'r"+r+"'"]),
                          style({
                            "font-size": "50%",
                            "border": "none",
                            "padding": "0"
                          }),

                          element("caption", [
                            attribute("id", "r" + r),
                            style({
                              "color": "white",
                              "font-size": "180%"
                            }),
                            nbsp()
                          ])

                        ];
                        for (var g = 255; g >= 0; g -= 17) {

                          cnl.push(element("tr", (
                            function () {
                              var cnl = [];
                              for (var b = 255; b >= 0; b -= 17) {

                                cnl.push(element("td", [
                                  style({
                                    "background-color": rgb(r, g, b)
                                  }),
                                  on("mouseover", "setCaption", ["'r"+r+"'", r, g, b]),
                                  nbsp() + nbsp()
                                ])); // </td>
                              }

                              return cnl;
                            }
                          )())); // </tr>

                        }
                        return cnl;
                      }
                    )()) // </table>

                  )); // </td>
                }
                return cnl;
              }
            )())); // </tr>
          }
          return cnl;
        }
      ]), // </table>

      element("div", [
        style({
          "padding": "1em",
          "font-family": monospace(),
          "color": "white"
        }),
        copyright() +" 2013 ", element("a", [
          attribute("href", myhome),
          style({
            "color": "white"
          }),
          "Michinobu Maeda"
        ]) // </a>
      ]) // </div>
    ]) // </body>
  );

  return html;

})().parentNode.innerHTML);

function element(name, cnl) {
  var el = document.createElement(name);

  var appendChildren = function (cnl) {
    if (cnl) {
      if (!Array.isArray(cnl)) {
        append(cnl);
      } else {
        for (var i = 0; i < cnl.length; ++i) {
          append(cnl[i]);
        }
      }
    }
    return el;
  };

  var append = function (cn) {
    if (cn.name && cn.value) {
      el.setAttributeNode(cn);
    } else if (typeof cn === "string") {
      el.appendChild(document.createTextNode(cn));
    } else if (typeof cn === "function") {
      appendChildren(cn());
    } else {
      el.appendChild(cn);
    }
  };

  return appendChildren(cnl);
}

function attribute(name, val) {
  var attr = document.createAttribute(name);
  attr.value = val;
  return attr;
}

function on(event, sig, oplist) {
  return attribute("on" + event,
    sig + "(" + (function () {
    var ops = "";
    if (oplist) {
      if (!Array.isArray(oplist)) {
        oplist = [oplist];
      }
      for (var i = 0; i < oplist.length; ++i) {
        if (i > 0) {
          ops += "," + oplist[i];
        } else {
          ops += "" + oplist[i];
        }
      }
    }
    return ops;
  })() + ")");
}

function style(hash) {
  var val = "";
  for (var key in hash) {
    val += key + ":" + hash[key] + ";";
  }
  return attribute("style", val);
}

function monospace() {
  return "'Courier New', Courier, monospace";
}

function rgb(r, g, b) {
  return "rgb(" + r + "," + g + "," + b + ")";
}

function nbsp() {
  return "\u00a0";
}

function copyright() {
  return "\u00a9";
}

http://sample.michinobu.jp/rgbcolors.html