type: widget

release: TBD

priority: 0 - very low

status: in planning

documentation: N/A

demo: N/A

1 - Description:

Select a color based on a preset color palette (preset), visual rainbow (simple), or visual rainbow in addition to entering HEX, RGB, and HSV values for an advanced user mode.

The default picker should be very compact and simple, ideally a rainbox picker or set of presets organzied in a colorwheel. We should consider supporting more advanced applications with a picker that supports a wide range of input methods. The picker should support conventional input methods. A really nice example of a powerful, but compact and easy-to-use advanced color picker can be seen on the Colour Lovers site.

Other great examples of possible features include John Dyer's color picker using Prototype and jPicker ported to jQuery from John Dyer's picker by Christopher Tillman.

Color picker examples:

jQuery Plugin color pickers:

2 - Visual designs

NOTES: These just show a few configurations of the picker. It should be built flexibly to let people choose the size and options needed for their project so this shows some common scenarios. All color inputs should have some form of a spinner, whether just the arrow keys or with the up/down buttons that appear on focus to save space.

Want to play with these designs? Download the Illustrator CS3 file: color_picker_8may2009.ai

Older wireframes - these cover a lot more variations but are a somewhat outdated.

3 - Functional Specifications/Requirements:

There are three types of color pickers (preset, simple, or advance):

Preset Color Picker:

- color pallette comes in 4 types (windows, mac, visibone, custom)

Simple Color Picker:

- uses rainbow and color slider

Advance Color Picker:

- uses rainbow and color slider

- can enter RGB, HSB, HEX values

- Support setting transparency of color

Each picker shares the following options:

- there are 4 interfaces for each type of color picker (standalone, input, iconOrPallette, or inputAndIconOrPallette)

- standalone

- not directoly connect to an input, but will output a color choice to a call back function

- input

- directly tied (dropdown) to a text input field (selected color shown as background of text input)

- iconOrPallette

- directly tied (dropdown) to a color pallette (pallette used to show currently selected color) or icon

- inputAndIconOrPallette

- directly tied to a text input field and pallette/icon (optional if both invoke the picker)

- close button (default = close button)

- optional indirect selection using the DONE button (default = direct selection). The done button is used to submit the selected color back to the input. When a DONE button is not used the selection happens in real time or is directly submitted to the input for each change.

4 - Markup & Style:

4.1 Initial markup examples

4.2 Recommended transformed HTML markup

4.3 Accessibility recommendation

4.4 CSS & Theme

5 - Latest version of plugin:

An outdated implementation was at (revision 2558):

http://jquery-ui.googlecode.com/svn/branches/colorpicker/

6 - Open issues being discussed

(Use this area to place things that we're hashing out like featuresand options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)

ColorPicker