ColorRoller - Color Picker 0.43

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.


Sam Goody
Current version
GitHub Issues



  • _self_/_current_:
    • Core/*
    • More/Utilites: Color

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.


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.



A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus