Colorwheel

A color picker coded using Raphael and jQuery. The wheel is drawn using the Raphael js library. jQuery is used to assist with events.

The wheel size is set on creation. It supports a small set of callbacks and touch events

It was created for the UI at Fame Driver and distributed with a MIT license.

Hope you enjoy it – John Weir

⇓ Download or see the Github page.
Requires jQuery and Raphael version 2.1.0 or greater.

Usage and methods

var cw = Raphael.colorwheel(dom_element, height_width [, segments]);

The wheel is drawn into a square, so only one dimension is required. segments is an option to increase, or decrease, the smoothness of the hue ring. 60 is the default.

cw.input(dom_element) ⇒ cw

Binds a text input for setting and receiving the color as a hex value. This will allow the user to input a hex value and update the wheel.

cw.onchange(callback) ⇒ cw

Set a callback for any change received. Callback takes one argument, a Raphael RGB color object.

cw.ondrag(start, stop) ⇒ cw

Set a start and stop callback for dragging. The callbacks take one argument, a Raphael RGB color object.

cw.color() ⇒ Raphael color object

Get the current color as RGB object

cw.color(hex_value) ⇒ cw

Set the current color via a hex value

Input

Assigning an input to a colorwheel will allow the user to directly change the hex color value.

When the input is set the colorwheel will set its color to the input's value

Enter a hex value above

Show Source

Callbacks

Simple example using the callback to update an element's text and css.

Show Source

Sizes

The wheel can be scaled to suit your needs. The large ring has larger number of segments, to make it smoother.

Show Source

A more advanced callback

When the color is changed a callback is used to change the colors of each letter below.

These letters will get cycled through... and through...

Show Source