HEX

File: //home/arjun/projects/buyercall/node_modules/colornames/example/color-table/index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../../build/build.css" >
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.no-responsive.no-icons.min.css" rel="stylesheet">
  </head>
  <body class="light">
  <div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
      <div class="container-fluid">
        <a class="brand" href="#">Colors</a>
        <ul class="nav pull-right">
          <li><a href="#" id="toggle" class="btn">Toggle Background Color</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="content"></div>
  <script src="../../build/build.js"></script>
  <style>
    .color {
      float: left;
      height: 70px;
      width: 70px;
      text-align: center;
      padding: 50px;
      margin: 10px;
      clear: both;
    }
    .info {
    }

    .color:hover .info {
    }
    .color .badge {
      margin-bottom: 5px;
    }

    .light {
      background-color: white;
      transition: background-color 0.2s ease-out;
      -webkit-transition: background-color 0.2s ease-out;
    }

    .dark {
      background-color: black;
      transition: background-color 0.2s ease-out;
      -webkit-transition: background-color 0.2s ease-out;
    }

    .hide {
    }

    .show {
    }
  </style>
  <script>
    var allColors = require('colors').all()
    var domify = require('component-domify')
    var classes = require('component-classes')
    var toArray = require('timoxley-to-array')
    var toggle = document.getElementById('toggle')
    var content = document.getElementById('content')

    toggle.addEventListener('click', function(e) {
      e.preventDefault()
      classes(toggle).toggle('active')
      classes(document.body).toggle('dark')
      classes(document.body).toggle('light')
    })

    function render(colorList) {
      allColors.forEach(renderOne)
    }
    function renderOne(color) {
      content.appendChild(domify([
        '<div ',
          'style="background-color: '+color.value+'" ',
          'class="row color ',
            color.css ? 'css ' : '',
            color.vga ? 'vga ' : '',
          'show">',
        '  <div class="info">',
        '    <div class="">'+color.name+'</div>',
        '  </div>',
        '</div>'
      ].join(''))[0])
    }

    render(allColors)

  </script>
  </body>
</html>