m0

<html>
  <head>
    <script src="js/goog/base.js"></script>
    <link rel="stylesheet" href="js/goog/css/colorpicker-simplegrid.css">
  <script>
    goog.require('goog.ui.PopupColorPicker');
    goog.require('goog.dom.DomHelper');
  </script>
  <style>
    .goog-popupcolorpicker {
      position:absolute;
      -moz-outline:0;
      outline:0;
    }
    #button1, #button2 {
      display: block;
      width: 60px;
      text-align: center;
      margin: 10px;
      padding: 10px;
      font: normal 0.8em verdana,sans-serif;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <h1>goog.ui.PopupColorPicker</h1>
  <a href="javascript:void(0)" id="button1">Show Custom</a>
  <a href="javascript:void(0)" id="button2">Show Normal</a>
  <script>
    // Custom picker.
    var dh = goog.dom.getDomHelper();
    var cp = new goog.ui.ColorPicker();
    var ca = new Array("#468AB6", "#4C4E6E", "#79AB4B", "#80CDE5","#8EC31F", "#F49C21");
    cp.setColors(ca);
    cp.setSize(ca.length);
    var pickerCustom = new goog.ui.PopupColorPicker(dh, cp);
    pickerCustom.render();
    pickerCustom.attach(document.getElementById('button1'));

    // Normal picker.
    var pickerNormal = new goog.ui.PopupColorPicker();
    pickerNormal.render();
    pickerNormal.attach(document.getElementById('button2'));

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