Here I am going to review 11 free and great javascript (including 1 java) colour picker plugins for web development.
For each single picker, the following aspects will be reviewed:
| ASPECTS | DESCRIPTIONS |
| Colour Picker Type | floating div or windows popup ; pops out on clicked or static |
| Support multiple inputs | if you need to insert colour codes into multiple inputs |
| Accuracy of selection | it would be easy if the selection area is big and picker is small (precise) |
| Support colour output in RGB | output can be in RGB mode beside hexadecimal |
| Loading time | also directly related to its file size |
| Requirements | it may requires mootools, jquery, etc |
| Support onchange event | if you need a function to run straight after you change the colour |
| Cross browser compatiblity | does it compatible with modern browsers |
| Extra features | anything extra that make it great |
| ASPECTS | DESCRIPTIONS |
| Colour Picker Type | Floating DIV pops out on clicked |
| Support multiple inputs | Yes |
| Accuracy of selection | Not very good because the selection area is small although the picker is a crosshair |
| Support colour output in RGB | Yes |
| Loading time | Fast – 28 KB (4 images and 1 js file) |
| Requirements | None |
| Support onchange event | Yes |
| Cross browser compatiblity | Big list of supported browsers at JScolor.com. Tested and Working in Opera 9, MSIE 6, Firefox 3, Safari 3 |
| Extra features | High performance, does not causes lag, allows changing picker’s face and colour scheme, input field can be left empty, ultimate input value control (forces uppercase or lowercase, with or without hash #) |
| ASPECTS | DESCRIPTIONS |
| Colour Picker Type | Static, suitable for “pick and go”, not suitable for inserting colour codes into a form with multiple inputs |
| Support multiple inputs | No |
| Accuracy of selection | Very good because the selection area is big , just like in Photoshop |
| Support colour output in RGB | Yes |
| Loading time | Fast – 28 KB (4 images and 1 js file) |
| Requirements | None |
| Support onchange event | No |
| Cross browser compatiblity | Tested on IE5.5, IE6, IE7, FF2, Opera 9, Safari 2. Tested and Working in Opera 9, MSIE 6, Firefox 3, Safari 3 |
| Extra features | Photoshop-like, support RGB and HSB just like in Photoshop, able to set initial colour |
| ASPECTS | DESCRIPTIONS |
| Colour Picker Type | Static, suitable for “pick and go”, not suitable for inserting colour codes into a form with multiple inputs |
| Support multiple inputs | No |
| Accuracy of selection | Very good because the selection area is big , just like in Photoshop |
| Support colour output in RGB | Yes |
| Loading time | Fast – 74 KB (4 images and 1 js file) |
| Requirements | None |
| Support onchange event | No |
| Cross browser compatiblity | Tested and Working in Opera 9, MSIE 6, Firefox 3, Safari 3 |
| Extra features | Another Photoshop-like colour picker, support RGB and HSB just like in Photoshop |
Links : Demo & Download
| ASPECTS | DESCRIPTIONS |
| Colour Picker Type | Window popups on clicked |
| Support multiple inputs | Yes |
| Accuracy of selection | Very good because the selection area is big , just like in Photoshop |
| Support colour output in RGB | Yes |
| Loading time | Fast – 60 KB (6 images, 5 js file, 1 HTML file) |
| Requirements | XHTML doctype, MooTools |
| Support onchange event | Yes |
| Cross browser compatiblity | Tested and working in Opera 9, MSIE 6, Firefox 3 |
| Extra features | Photoshop-like, support RGB and HSB, customisable look and feel of the color picker, support a total of 4 events beside onChange, able to invert and desaturate colour, able to set initial colour |
Links : Demo & Download
| ASPECTS | DESCRIPTIONS |
| Colour Picker Type | Java applet, The RGB value is passed to a JavaScript variable which could then be used to modify your web page dynamically or as form inputs. |
| Support multiple inputs | Unknown |
| Accuracy of selection | Very good because the selection area is big |
| Support colour output in RGB | Yes |
| Loading time | Fast – 74 KB (4 images and 1 js file) |
| Requirements | Java Platform for browser |
| Support onchange event | Yes as it claimed but no example was shown |
| Cross browser compatiblity | Tested and working in browsers with Java |
| Extra features | Allow you to set individual RGB values using scrolls |
Links : Demo & Download
| ASPECTS | DESCRIPTIONS |
| Colour Picker Type | Floating DIV pops out on clicked |
| Support multiple inputs | No |
| Accuracy of selection | Very good because the selection area is big and the picker is a crosshair |
| Support colour output in RGB | Yes |
| Loading time | Fast – 60 KB (2 images and 1 js file) |
| Requirements | None |
| Support onchange event | Yes by editing function BtnOkClicked() |
| Cross browser compatiblity | Tested and working in Opera 9, MSIE 6, Safari 3 ; Failed in Firefox 3. |
| Extra features | Contains a color pallet that stores your most recently used colors, can retain up to 8 personal colors. |
Links : Demo & Download
| ASPECTS | DESCRIPTIONS |
| Colour Picker Type | Floating DIV pops out on clicked (with nice effects such as fade and slide) |
| Support multiple inputs | Yes |
| Accuracy of selection | Not very good because the selection area is not very big although the picker is a crosshair |
| Support colour output in RGB | Yes |
| Loading time | Not very fast – 178 KB (16 images and 5 js files) |
| Requirements | JQuery |
| Support onchange event | Yes |
| Cross browser compatiblity | Tested and working in Opera 9, MSIE 6, Firefox 3, Safari 3 |
| Extra features | Supports RGB and HSB, stylish interface, nice effect(fading or sliding) |
| Side Notes | Colour cannot be picked by a single click, instead you should drag it a little bit (try it yourself in the demo) |
Links : Demo & Download
| ASPECTS | DESCRIPTIONS |
| Colour Picker Type | Floating DIV pops out on clicked |
| Support multiple inputs | Yes |
| Accuracy of selection | Good because the selection area is not very big although the picker is a crosshair |
| Support colour output in RGB | Yes |
| Loading time | Not very fast – 93 KB (11 images and 2 js files) |
| Requirements | JQuery |
| Support onchange event | Yes |
| Cross browser compatiblity | Tested and working in Opera 9, Firefox 3, Safari 3 ; Failed in MSIE 6. |
| Extra features | Supports RGB and HSB, stylish interface |
| Side Notes |
Links : Demo & Download
| ASPECTS | DESCRIPTIONS |
| Colour Picker Type | Floating DIV pops out on clicked |
| Support multiple inputs | Yes |
| Accuracy of selection | Very good because the selection area is big , just like in Photoshop |
| Support colour output in RGB | Yes |
| Loading time | Fast – 48 KB (6 images, 2 js file) |
| Requirements | MooTools |
| Support onchange event | Yes |
| Cross browser compatiblity | Tested and working in Opera 9, MSIE 6, Firefox, Safari |
| Extra features | Photoshop-like, support RGB and HSB, customisable look and size of the color picker, able to set initial colour, support 2 events (onComplete and onChange) |
Links : Demo & Download
| ASPECTS | DESCRIPTIONS |
| Colour Picker Type | Floating DIV pops out on clicked |
| Support multiple inputs | Yes |
| Accuracy of selection | Not good. It has the smallest selection area and the picker is a circle |
| Support colour output in RGB | No |
| Loading time | Not very good – 200 KB |
| Requirements | a library and scriptaculous |
| Support onchange event | Yes |
| Cross browser compatiblity | Tested and working in Opera 9, Firefox 3, MSIE 6, Safari 3 |
| Extra features | - |
| Side Notes | Colour picker cannot be closed without clicking “OK” |
| ASPECTS | DESCRIPTIONS |
| Colour Picker Type | Floating DIV (always visible once loaded, movable and can be closed) |
| Support multiple inputs | No |
| Accuracy of selection | Not very good because the selection area is not very big although the picker is a crosshair |
| Support colour output in RGB | No |
| Loading time | Fast – 23 KB (3 images and internal javascript) |
| Requirements | None |
| Support onchange event | No |
| Cross browser compatiblity | Tested and working in Opera 9, Firefox 3, Safari 3 ; Failed MSIE 6 |
| Extra features | Picker body is movable (dragable) |
| Side Notes | In the demo, the colour picker changes background colour instead of inserting value into input, but it can be edited to do so by editing the function HSVupdate() |
Links : Demo and Download
Please correct me and sorry if I missed or got anything wrongly.
Hey there, welcome to ZenVerse Blog!
I blog about stuffs that I am interested in, from Web Design & Development to WordPress Themes & Tips, SEO, Creative Inspirations, Google, Mac OS and Android OS.
While my online working environment is focused mainly on Wordpress, I make free wordpress themes, premium wordpress themes and wordpress plugins. Besides, I give out free downloadable resources to the readers.
· Subscribe to All Updates
· Subscribe to Specific Category Only
ZenVerse is Zen's web journal about web design and development.
Zen is from Malaysia.
More about Zen »
![Post thumbnail of [Javascript] Search Box to Show Default Text on Load and Cleared When Focused](http://zenverse.net/wp-content/uploads/2012/07/searchtext_125.jpg "[Javascript] Search Box to Show Default Text on Load and Cleared When Focused")
Hi there,
maybe you’d like to make it 12 and add mine to the list…
Would be very nice of you:
http://dematte.at/colorPicker/ or
http://colorpicker.dematte.at/
Hope you like it
Cheers
Peter
Very detailed post would it be OK if i translate into Dutch for our sites visitors? Thanks