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.

Community

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

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

• Open threads regarding the color picker on the MooRTE Google Group.

• Watch the GitHUB page for updates.

• Leave issues on the GitHUB Issue Tracker.

• Check out the Mootools Forge Page.

  • As I have no control over the state of the forge page, the info and downloads on this page may be out of date.

• Or email us:

   var name = "ColorRoller";
   var company = "siteroller.net";
   var email = name + '@' + company;
   // There's gotta be a better way to keep spammers at bay, no?!
  

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

How To Use

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

Arguments:

• 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).

Styling

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.

Screenshots