Edit in JSFiddle

/**
 * Very simple jQuery Color Picker.
 *
 * Copyright (C) 2008-2011 Andreas Lagerkvist
 * Copyright (C) 2012 Tanguy Krotoff
 *
 * Original source code and demo: http://andreaslagerkvist.com/jquery/colour-picker/
 *
 * License: http://creativecommons.org/licenses/by/3.0/
 */

(function($) {

  /**
   * Main color picker function.
   */
  $.fn.colorpicker = function(options) {
    options = $.extend({}, $.fn.colorpicker.defaults, options);

    // Inverts a hex-color
    var colorInvert = function(colorHex) {
      var r = colorHex.substr(0, 2);
      var g = colorHex.substr(2, 2);
      var b = colorHex.substr(4, 2);

      return 0.212671 * r + 0.715160 * g + 0.072169 * b < 0.5 ? 'ffffff' : '000000'
    };

    var dialog = $('#colorpicker');
    if (!dialog.length) {
      dialog = $('<div id="colorpicker"></div>').appendTo(document.body).hide();
    }

    // Remove the color-picker if you click outside it
    $(document).click(function(event) {
      if (!($(event.target).is('#colorpicker') || $(event.target).parents('#colorpicker').length)) {
        dialog.hide(options.delay);
      }
    });

    // For HTML element passed to the plugin
    return this.each(function() {
      var element = $(this);

      // Build the list of colors
      // <li><a href="#" style="background-color: #111fff;">111fff</a></li>
      var colorList = '';
      $.each(options.colors, function(index, color) {
        colorList += '<li><a href="#" style="background-color: #' + color + ';">' + color + '</a></li>';
      });

      // When you click on the HTML element
      element.click(function() {
        // Show the dialog next to the HTML element
        var elementPos = element.offset();
        dialog.html('<ul>' + colorList + '</ul>').css({
          position: 'absolute',
          left: elementPos.left,
          top: elementPos.top + element.outerHeight()
        }).show(options.delay);

        // When you click on a color inside the dialog
        $('a', dialog).click(function() {
          // The color is stored in the link's value
          var color = $(this).text();

          // Change the input's background color to reflect the newly selected color
          element.css({
            'background-color': '#' + color,
            color: '#' + colorInvert(color)
          });

          element.trigger({
            type: 'changeColor',
            color: '#' + color
          });

          // Hide the color-picker and return false
          dialog.hide(options.delay);

          return false;
        });

        return false;
      });
    });
  };

  /**
   * Default color picker options.
   */
  $.fn.colorpicker.defaults = {
    // Default colors for the picker
    colors: [
      // Colors from Google Calendar
      '000000', // Black
      '7BD148', // Green
      '5484ED', // Bold blue
      'A4BDFC', // Blue
      '46D6DB', // Turquoise
      '7AE7BF', // Green
      '51B749', // Bold green
      'FBD75B', // Yellow
      'FFB878', // Orange
      'FF887C', // Red
      'DC2127', // Bold red
      'DBADFF', // Purple
      'E1E1E1', // Gray

      // More colors from Google Calendar
      'AC725E',
      'D06B64',
      'F83A22',
      'FA573C',
      'FF7537',
      'FFAD46',
      '42D692',
      '16A765',
      '7BD148',
      'B3DC6C',
      'FBE983',
      'FAD165',
      '92E1C0',
      '9FE1E7',
      '9FC6E7',
      '4986E7',
      '9A9CFF',
      'B99AFF',
      'C2C2C2',
      'CABDBF',
      'CCA6AC',
      'F691B2',
      'CD74E6',
      'A47AE2'
    ],

    // Animation delay for the dialog
    delay: 0
  };

})(jQuery);
$(document).ready(function () {
  $('#colorpicker1').colorpicker({
    colors: ["FFFFFF", "000000", "111FFF", "C0C0C0", "FFF000"]
  });

  $('#colorpicker2').colorpicker();

  $('#colorpicker3').colorpicker({
    delay: 500
  }).on('changeColor', function (event) {
    $(document.body).css('background-color', event.color);
  });
});

/**
 * CSS inspired by Bootstrap Twitter.
 * See https://github.com/twitter/bootstrap/blob/master/less/dropdowns.less
 * See http://twitter.github.com/bootstrap/assets/css/bootstrap.css
 */

#colorpicker:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

#colorpicker:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

#colorpicker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;

  min-width: 160px;
  max-width: 209px;

  padding: 4px 0px 0px 4px;
  margin: 1px 0 0;
  list-style: none;
  background-color: #ffffff;

  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);

  *border-right-width: 2px;
  *border-bottom-width: 2px;

  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

  #colorpicker ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

    #colorpicker ul li {
      float: left;
      margin: 0 4px 4px 0;
    }

      #colorpicker ul li a {
        display: block;

        width: 15px;
        height: 15px;

        text-indent: -100000px;
      }

      #colorpicker ul li a:hover {
        width: 13px;
        height: 13px;

        border: 1px solid black;
}
#foo,
#colorpicker2,p{margin:25px;}

<div id="foo">
<div id="colorpicker2">Click me!</div>
<input id="colorpicker3" type="text">
    <p>
        CC.BY   <a href="http://andreaslagerkvist.com/jquery/colour-picker/">Tanguy Krotoff</a></p>
</div>