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:
- https://github.com/vanderlee/colorpicker
- http://www.digitalmagicpro.com/jPicker/
- http://www.colorpicker.com/
- http://www.dhtmlgoodies.com/scripts/js_color_picker_v2/js_color_picker_v2.html
- http://developer.yahoo.com/yui/colorpicker/
- http://safalra.com/web-design/javascript/widgets/colour-picker/
- http://www.colorjack.com/software/dhtml+color+picker.html
- http://colourmod.com/
- http://johndyer.name/lab/colorpicker/
- http://moorainbow.woolly-sheep.net/#demos
- http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_ColorPicker.html
- http://www.mozilla.org/editor/ui_specs/ColorPickerWidget.html
- http://www.visibone.com/swatches/
jQuery Plugin color pickers:
- https://github.com/vanderlee/colorpicker
- http://www.digitalmagicpro.com/jPicker/
- http://recurser.com/articles/2007/12/18/jquery-simplecolor-color-picker/
- http://acko.net/dev/farbtastic
- http://www.eyecon.ro/colorpicker/
- http://interface.eyecon.ro/demos/slider_colorpicker.html
- http://www.syronex.com/software/jquery-color-picker
- http://www.felecan.com/jquery-normal-color-picker/
- http://www.web2media.net/samples/color_picker/demo.html
- http://sstrudeau.com/jquery-dropper/demo/index.html
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.)
Comments (5)
Mark Gibson said
at 11:49 am on Feb 19, 2009
As the current effort seems to have stagnated, and isn't functional I've taken the initiative to start a new Colour Picker, based on a new widget and colour library:
http://test3.internal.adaptavist.net/~mgibson/
Eric said
at 6:16 am on Apr 10, 2009
Mark, could you add to your color picker a brightness and darkness slider?
because that features are the only ones that are missing from the colourlovers color picker.
Andrew Powell said
at 1:20 pm on May 8, 2009
In response to all of the Visual Design updates:
The configuration here http://www.eyecon.ro/colorpicker/ is by far the most compact, and it is being *widely* used on the net. In fact, we're using it in an enterprise level app because it is so robust and so compact. All of the designs which have been added recently to the Visual Design section do not reflect a vertically compact layout, and this should imho, be considered as a top-priority layout.
Todd Parker said
at 3:22 pm on May 8, 2009
@Andrew The size of the picker is something we should optimize for sure. Maybe it's hard to tell on the designs because the image is scalable, but all the mini pickers in the left are basically the same height as the eyecon pickers (~180px) and we can tweak the final size to be as efficient as possible while still making it possible to pick colors. I just added a micro size that is similar to Farbtastic's at 120px which should be tiny enough for any application. I also added a quick sketch showing that this should be a very flexible system that allows you to mix and match components into multi-column layouts and choose which size picker you want to offer since everyone will have different needs. See updated sketch above. I'll attach an Illustrator CS3 file above if others want to play!
@Eric We could add the brightness and darkness sliders too if you think that they would be useful. It would just make the picker a bit bigger. I haven't need a non-Flash picker that has these options so maybe someone can weigh in and say whether this is possible with images + JS?
Carsten Klein said
at 2:13 pm on Aug 13, 2009
please also include alpha transparency
how about making the returned color value, in case of for example rgb a quadruple that also includes alpha transparency?
thus, when passing such a color value via the css method to a given element, it would automatically apply a transparency filter?
You don't have permission to comment on this page.