Moopick - Mootools-based Color Picker

Here's a nice little Mootools-based Color Picker class, which creates a Color Picker with a Web-safe color pallet (216 colors).

Configuration options

The Class comes with several options you can configure by initializing it with an options Hash:

• palletParentElement - The DOM element into which the Color Picker is injected. Defaults to document.body
• palletID - The 'id' attribute of the Color Picker element. Defaults to "pallet"
• styles - Hash of styles that control the internal styling of the Color Picker's color boxes. Use to override the Color Picker's color boxes in the internal styling Hash. Default Hash is: {
  'width':'8px',
  'height':'8px',
  'border-color':'#ddd',
  'border-width':'1px'
}

Events

• onColorHover - Fires when the mouse cursor hovers on a color box inside the pallet.

  Callback parameters

  • color (string) - The color value of the box the cursor hovers on
• onColorClick - Fires when thea color box inside the pallet has been clicked on.

  Callback parameters

  • color (string) - The color value of the box that was clicked on

Initializing the Color Picker

<script type=“text/javascript”>
 function init(){
  var pallet = new Moopick({
   palletParentElement:$('mypallet')
  });
  pallet.addEvents({
   'onColorClick':getColor,
   'onColorHover':showColor,
  });
 }

 function getColor(color){
  alert(color);
 }
 function showColor(color){
  $('color').set('text',color);
 }
 init();
</script>

Demo

Show Pallet  
 

Download the script

You can download the script as a zipped file (right-click -> download as)

Compatibility

I tested this Class successfully with the following browsers:

• IE6 / IE7
• Safari 3 (Mac)
• Firefox 2 / 3
• Opera 9.6 (Mac)

The Class requires Mootools v.1.2 Core with at least Class, Class.Extras, Selectors and Element.Event support

         

• Moosort - Mootools table-sorting
• Multi-format Web media player
• Moopick - Mootools-based Color Picker
• Moobox - Mootools-based Modal Window
• Serving Ruby on Rails with Apache2 and mod_fcgid on Leopard
• Setting up Apache, MySQL and PHP 5 with GD support on Leopard
• IE6 Transparent PNG and Dead Links
• Image Replacement For Form Buttons