Color-Picker for MooTools 1.3 and higher - original by Djamil Legato (w00fz)
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


mooRainbow is a Color-Picker which was originally written by Djamil Legato (w00fz).
You can attach mooRainbow to any DOM Element. mooRainbow will be opened by clicking on this element. Works with mooTools 1.3 and 1.4.

Screenshot Screenshot

How to use

Add the mooRainbow JS and CSS File to your website

<link rel="stylesheet" href="Assets/mooRainbow.css" type="text/css" />

<script src="js/mooRainbow.js" type="text/javascript"></script>

Now you have an input field somewhere on your website, the code could look like this:

<input type="text" id="titleColor" name="titleColor" />

To attach a mooRainbow instance to this input field, you simply use the following code:

var r = new MooRainbow('titleColor', {
	imgPath: 'Assets/images/', // if this value is not set, mooRainbow will search for images in images/ 
	onChange: function(color) {
		this.element.value = color.hex;

Thats it!

Detailed Documentation


var myMooRainbow = new MooRainbow(element, options);


  1. element - the element where you want to attach mooRainbow
  2. options - options, see below for more details


  • id - the id of mooRainbow (default: 'mooRainbow')
    Note: every object must have an unique id.
  • prefix - the prefix for your CSS classnames (default: 'moor-')
    i.e.: prefix: 'moor-' => in your CSS: .moor-okButton { color: #fff; }
  • imgPath - the path where the slider and the overlay images are contained (default: 'images/')
    Note: always put the '/' at the end
  • startColor - an array. the color you want MooRainbow starts with (default: [255, 0, 0])
    Note: it must be an RGB color given as array [RED, GREEN, BLUE]
  • onChange - a function to fire when the color change