Mootools Color Chooser, supporting many color spaces and color picker styles.
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

ColorRoller - Color Picker

Color Picker for Mootools.

Tiny, Simple, Cross Browser: IE4+, FF1+, Webkit2+, Opera

Popular formats: HSB / HSV, HSL / HSI, HSW / HSG

Various style pickers: Color Wheel, MS Paint, Adobe Photoshop, GIMP Triangle.



The Color Picker was devised as part of the MooRTE wysiwyg editor.

Issues? Ideas? Wanna Join? [We need help!]

Special thanks to Buriel Webwerx for their help with the images.

How To Use

var CR = new ColorRoller(element [, options]);


  • element [string, element] - ID of element or reference to the element object.
  • options [object]
    • color [RGB array or hexadecimal] - color cursor should be on when initialized.
    • type [number: 0 - Wheel, 1 - Paint, 2 - Photoshop, 3 - Triangle] - default picker type.
    • space [string: 'hsv','hsl','hsg'] - default color space.
    • change [function] - callback every time the color is changed
    • cancel [function] - callback when color picker is closed via the 'x' button.
    • complete [function] - callback when 'check' button is pressed on color picker.
    • colorswitch [Boolean] - When switching color spaces or types, should the color be maintained and the cursor updated (true - default) or the position of the the cursor maintained and color be updated (false).


All of the styles are stored in a separate stylesheet: assets/CollerRoller.css
You are encouraged to improve the layout of the picker, and to post on the the MooRTE forum some updated or variant styles.
The colorpicker uses images instead of background-images so that the color picker can be scaled cross-browser.

Dependencies - Color.js

Mootools more includes a file 'Color.js' with support for HSB.
The included version of Color.js is a complete rewrite that adds support for HSB, HSW and HSL [along with other improvements].
Our version is roughly the same size and fully backwards compatible - just drop it in and use.
The Color.js folder has our version, the mootools version, and a page used to compare the two.

If you think this should be part of -more, let people know.

Known Issues

  1. The Triangle color picker does not work in IE6.
  2. Bugs in the various flavors of IE keep on appearing and being squashed. Post if I missed any.
  3. If there is any desire to drop all images and creating the gradients with CSS alone it will be done.
  4. For all issues, please post to the Github issue page or start a thread on the MooRTE group.


Photoshop Style, HSL Space Paint Style, HSB Space ColorWheel Style, HSL Space Photoshop Style, HSG Space