What is JSColor?

JSColor is a simple & user-friendly color picker for your HTML forms. It extends all desired <input> fields of a color selection dialog. You can pickerize your input fields in two easy steps (see Installation below)

JSColor has been featured in such projects as WordPress, Adobe Dreamweaver, and Plug N Edit.

Demo

Advantages of JSColor

Installation

  1. Refer to jscolor.js in your HTML page:
    <script type="text/javascript" src="jscolor/jscolor.js"></script>
  2. Add a class to desired <input> tags:
    <input class="color">
  • 2014-12-09
    jscolor-1.4.4 release: Added exception to suppress JSColor on inputs of type='color' to avoid clash with built-in color pickers in modern browsers. Thanks to Thijs Kinkhorst!
  • 2013-11-25
    Fixed touchmove event. Thanks to Victor for posting the fix!
  • 2013-04-08
    jscolor-1.4.1 now supports touch devices. Thanks to Andrey Logunov for adding this great feature!
  • 2012-07-06
    jscolor-1.4.0 released. Thanks to Ian Whiteley for his help.
  • 2012-06-29
    Updated Cross-browser Compatibility table
  • 2012-01-05
    jscolor-1.3.12 released, fixing some minor CSS issues.
  • 2011-11-07
    jscolor-1.3.11 introduces new pickerSmartPosition property.
  • 2011-11-03
    jscolor-1.3.10 introduces new onImmediateChange property.
  • 2011-07-28
    jscolor-1.3.9 introduces optional Close button.
  • 2011-07-10
    jscolor-1.3.8 fixes problem with displaying images in latest version of Chrome.
  • 2011-07-07
    jscolor-1.3.7 fixes onchange bug appearing in IE9. Thanks to Jim Andrews for bug reports.
  • 2011-07-01
    Mouse position in IE9 has been detected incorrectly in some cases, jscolor-1.3.6 fixes this bug.
  • 2011-06-21
    jscolor-1.3.5 fixes IE8 border rendering bug.
  • 2011-06-20
    Big thanks to Yossi Cohen for his bug fixes that made jscolor-1.3.4 possible.
  • 2011-06-09
    jscolor-1.3.3 fixes major CSS bug from previous release.
  • 2011-06-07
    Added option slider to control the visibility of the value/saturation slider.
  • 2011-05-20
    JSColor has been implemented in Microsoft's official IE10 demos [123]
  • 2011-02-09
    I'm happy to announce that JSColor has reached 2000 downloads per month and still growing.
  • 2011-01-21
    Some minor site updates.
  • 2010-08-16
    Peter Dematté has developed an excellent JSColor-inspired color picker jscolorXS
  • 2010-05-05
    JSColor is now available as Adobe Dreamweaver Extension. Thanks to Veeresh Hiremath.
  • 2010-01-23
    jscolor-1.3.1 fixes bug in getElementPos() method.
  • 2009-10-16
    jscolor-1.3.0 released! This branch introduces semicolon syntax, strict comparison operators and hasOwnProperty() filtering to make jscolor resistant to Object.prototype tweaks. No changes in API.
  • 2009-10-07
    jscolor-1.2.4 released.
  • 2009-10-07
    STRd6 has ported jscolor-1.0.9 into jQuery, see jqcolor project.
  • 2009-04-13
    jscolor-1.2.3 released. This version fixes incorrect computing of the dialog width.
  • 2009-02-03
    jscolor-1.2.2 fixes image preloading again, it should be finally working now. Thanks to Jan Nicklas for the bug report.
  • 2009-01-16
    jscolor-1.2.1 release fixes incorrect image preloading. Also, property bindAuto has been renamed to binding.
  • 2009-01-16 I'm proud to announce jscolor-1.2.0! Changelog:
    • new default settings: color=FFFFFF, hash=false
    • property picker renamed to pickerOnfocus
    • added support for image preloading
    • JSColor is now released under the GNU LGPL
  • 2008-11-30
    jscolor-1.1.2 released! Methods fromHSV() and fromRGB() now truncate input values. Functions showPicker() and hidePicker() became public, so you can show/hide the picker manually.
  • 2008-11-23
    jscolor-1.1.1 released! This version fixes HEAD bug and introduces new property pickerPosition. There are also some new examples on this site.
  • 2008-10-26
    I'm proud to announce new, completely rewritten JSColor-1.1.0. Color picker is now much more customizable and widely accessible via API. Enjoy!

Cross-browser compatibility (for release 1.3.12)

Ace Explorersupported
Avant Browser 11.5supported
Firefox 5 and abovesupported
Firefox 4supported
Firefox 3supported
Firefox 2supported
Flock 1.2.1supported
Google Chrome 6.0 and abovesupported
Google Chrome 4.1supported
Internet Explorer 9supported
Internet Explorer 8supported
Internet Explorer 7supported
Internet Explorer 6supported
Internet Explorer 5.5 SP2supported
Internet Explorer 5.01 SP2supported
Konqueror 3.5.4supported
Netscape 8.1supported
Opera 10 and abovesupported
Opera 9supported
Safari 5 and abovesupported
Safari 4supported
Safari 3supported
Safari (iPhone 3G)supported
SeaMonkey 1.0.5supported

Author & License

GNU LGPL JSColor project is maintained by Jan Odvárko and released under the GNU Lesser General Public License. LGPL differs from GPL by allowing you to use JSColor even in non-(L)GPL applications. If you find JSColor useful, even a small donation would be much appreciated.

Download

Latest release is jscolor-1.4.4.zip

Installation

  1. include script jscolor/jscolor.js
  2. turn all desired <input> elements into <input class="color">

Do you like JSColor?

JSColor is LGPL licensed, so you can use it everywhere, even in commercial applications.

If you find JSColor useful, you can donate me a pint or two (-; Thank you!

Examples

  1. Basic usage
  2. Tweaking
  3. Picker modes HSV/HVS
  4. Picker position
  5. Picker borders & face
  6. Picker color scheme
  7. Showing/hiding the picker
  8. Onchange event
  9. onImmediateChange event
  10. Getting the color
  11. Setting the color
  12. Linking foreign elements
  13. Manual binding - useful for AJAX applications
  14. Hiding the Slider
  15. Closable picker
  16. Limiting H/S/V ranges
  17. Performance test

Tags

free open source gnu gpl online web interactive javascript java script js dhtml dynamic html compact simple small smooth slider slidable rgb rgba hsl hsla hsv hex pick colour color picker colorpicker colorpallet colorpalette color palette pallet mixer spectrum select selection selector getter generator alpha transparency opacity form forms input field dropdown popup pop-up context dialog panel window box control ajax jquery mootools yui dojo mochikit framework plugin module component extension widget tool toolkit applet library pack package