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 and Adobe Dreamweaver.
Demo
- See JSColor in action: ← go here
- Practical example: Gradient generator
- More demos →
Advantages of JSColor
- Quick & easy installation
- Customizable appearance and behavior
- No framework needed (jQuery, MooTools, YUI, Dojo…)
- No popup windows
- Wide cross-browser compatibility
Installation
- Refer to jscolor.js in your HTML page:
<script type="text/javascript" src="jscolor/jscolor.js"></script>
- Add a class to desired
<input>tags:<input class="color">
- 2013-04-08
jscolor-1.4.1 now supports touch devices. Thanks to Andrey Logunov for adding this great feature!
jscolor-1.4.0 released. Thanks to Ian Whiteley for his help.
- onImmediateChange event now passes jscolor instance through
thisobject - introduced properties for limiting H/S/V ranges: minH, maxH, minS, maxS, minV, maxV.
- Fixed some non-standard calls which prevented jscolor from being minified
Updated Cross-browser Compatibility table
jscolor-1.3.12 released, fixing some minor CSS issues.
jscolor-1.3.11 introduces new pickerSmartPosition property.
jscolor-1.3.10 introduces new onImmediateChange property.
jscolor-1.3.9 introduces optional Close button.
jscolor-1.3.8 fixes problem with displaying images in latest version of Chrome.
jscolor-1.3.7 fixes onchange bug appearing in IE9. Thanks to Jim Andrews for bug reports.
Mouse position in IE9 has been detected incorrectly in some cases, jscolor-1.3.6 fixes this bug.
jscolor-1.3.5 fixes IE8 border rendering bug.
Big thanks to Yossi Cohen for his bug fixes that made jscolor-1.3.4 possible.
jscolor-1.3.3 fixes major CSS bug from previous release.
Added option slider to control the visibility of the value/saturation slider.
JSColor has been implemented in Microsoft's official IE10 demos [1, 2, 3]
I'm happy to announce that JSColor has reached 2000 downloads per month and still growing.
Some minor site updates.
Peter Dematté has developed an excellent JSColor-inspired color picker jscolorXS
JSColor is now available as Adobe Dreamweaver Extension. Thanks to Veeresh Hiremath.
jscolor-1.3.1 fixes bug in getElementPos() method.
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.
jscolor-1.2.4 released.
STRd6 has ported jscolor-1.0.9 into jQuery, see jqcolor project.
jscolor-1.2.3 released. This version fixes incorrect computing of the dialog width.
jscolor-1.2.2 fixes image preloading again, it should be finally working now. Thanks to Jan Nicklas for the bug report.
jscolor-1.2.1 release fixes incorrect image preloading. Also, property bindAuto has been renamed to binding.
- 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
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.
jscolor-1.1.1 released! This version fixes HEAD bug and introduces new property pickerPosition. There are also some new examples on this site.
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 Explorer | supported |
| Avant Browser 11.5 | supported |
| Firefox 5 and above | supported |
| Firefox 4 | supported |
| Firefox 3 | supported |
| Firefox 2 | supported |
| Flock 1.2.1 | supported |
| Google Chrome 6.0 and above | supported |
| Google Chrome 4.1 | supported |
| Internet Explorer 9 | supported |
| Internet Explorer 8 | supported |
| Internet Explorer 7 | supported |
| Internet Explorer 6 | supported |
| Internet Explorer 5.5 SP2 | supported |
| Internet Explorer 5.01 SP2 | supported |
| Konqueror 3.5.4 | supported |
| Netscape 8.1 | supported |
| Opera 10 and above | supported |
| Opera 9 | supported |
| Safari 5 and above | supported |
| Safari 4 | supported |
| Safari 3 | supported |
| Safari (iPhone 3G) | supported |
| SeaMonkey 1.0.5 | supported |
Author & License
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 and want to repay my work, a small donation would be appreciated.