ZENVERSE » picker http://zenverse.net Design and Web Development Sun, 13 May 2012 15:26:20 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 11 Free & Great Javascript Colour Pickers for Web Development http://zenverse.net/11-free-and-great-javascript-colour-pickers-for-web-development/ http://zenverse.net/11-free-and-great-javascript-colour-pickers-for-web-development/#comments Sat, 20 Jun 2009 08:20:33 +0000 Zen http://zenverse.net/11-free-and-great-javascript-colour-pickers-for-web-development/ .good { color:#2bb700; font-weight:bold; } .middle { color:#9c5f00; font-weight:bold; } .bad { color:#ff0000; font-weight:bold; } .compare { border:1px solid #cccccc; } .compare td { background:white; padding:6px; border-bottom:1px solid #cccccc; border-right:1px solid #cccccc } .compareheading { padding-left:10px!important; font-weight:bold; color:#fff; background:#515151 !important; }

Intro

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

Here we go

1. JScolor.com

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 #)

Links : Demo | Download

2. JohnDyer.name

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

Links : Demo | Download

3. SwitchOnTheCode.com

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

4. NoGray.com

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

5. NavSurf.com

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

6. JavascriptKit.com – JSwitch Color Picker

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

7. EyeCon.ro

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

8. DesignReviver.com

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

9. mooRainbow

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

10. KnallGrau.at

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”

Links : Demo | Download

11. NoFunc.org

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

Hmmm

Please correct me and sorry if I missed or got anything wrongly.

]]> http://zenverse.net/11-free-and-great-javascript-colour-pickers-for-web-development/feed/ 2