What I want in a JavaScript colorpicker
I have been wanting to add colorpickers in a couple of projects recently, and was not happy with the options. Just search JavaScript Colorpicker and you’ll see what I mean. It got me thinking about what I wanted out of a colorpicker.
No Images!
It is pretty well known that you should limit the number of images that your web page requests for performance reasons. Some of these, including the eyecon.ro picker, which is the first that shows up when searching ‘jQuery colorpicker’, require a ton of images (27, in fact). This is overkill. Why can’t it be skinned with HTML/CSS?
Reasonable defaults
I found myself having to dig through the source code of various colorpickers in order to get them to act how I wanted. Maybe my experience on this is unique, but once I wanted to actually script behavior to go along with the picker (think - a template editor for an online portfolio), it became painful quickly.
Browser Support
It needs to support all major browsers (even IE). Ideally it could also support mobile devices.
Drop in
Didn’t want to have to download zip folders, place a bunch of images in my project and modify css files to point to the correct image path, etc. I just want to include a single JavaScript file, and a single CSS file, and be done.
Anything Like This?
I did find the nifty FlexiColorPicker, which accomplishes the no images goal with SVG and VML. It seems very nice, but didn’t have some of the features I wanted (dragging around the hue slider and picker didn’t actually work). I’m glad I found it, as I did use some of the gradients as a starting point with my CSS gradients.
Spectrum - My JavaScript Colorpicker
I have done a fair amount of color manipulation work while building a color scheme generator in a theme editor. I also have made a JavaScript color micro framework for parsing and conversion, called TinyColor. This is designed to allow a wide range of input and output (named colors, hex, rgb, hsl, hsv).
So, I decided to try my hand at this, and made the spectrum JavaScript colorpicker.
It works in all major browsers (tested in Safari, Chrome, Firefox, IE 7+, iOS, Opera). It uses IE’s propriety gradient filter (with some hacks for the hue slider - see .spectrum-ie-1 through 8 in spectrum.css. It should even work in iPhone and iPad - let me know if you have one and can double check that for me over on the demo page :). It is still in early stages, but I would love if I could get some feedback on the UI and desired functionality.
Demo
Head over to the current project page to try out the demo and see the docs.
It currently requires jQuery, but I have been trying to write the code to make it possible to remove that dependancy.
December 13th, 2011 at 11:16 am
Hi Brian-
Thanks much for doing this. Do you know of a sample HTML that uses your color picker? I see bits and pieces of code on your page, but would love to see the whole thing together in one HTML page, with the field and the $(#picker).spectrum references. I’m a nasty javascript developer and it’s hard for me to make sense of the snippets semi-out of context.
Thanks for any help!
-Hairgami_Master
December 13th, 2011 at 12:30 pm
Hi,
Check out https://bgrins.github.io/spectrum for a documentation page. If you’d like to see the source of the demo page (what makes the color change as you move around the picker), see the demo page on github.
If you’d like to see a full fledged demo (though not with code samples, check out http://briangrinstead.com/colorstash.
Let me know if this still isn’t clear enough and I’ll try to update the docs.
Brian
March 9th, 2013 at 4:11 am
Hi. I try to use spectrum in a little app using webview on Android. But thé color picker don t load. But it load on native browser. Do u Know about this ?
March 18th, 2013 at 2:33 pm
SoftMoon WebWare’s MasterColorPicker™ package delivers five JavaScript™ powered professional quality interactive graphical color-pickers, plus a named-color-table based color-picker framework with seven named-color database files included: Brewer, common, Crayola, HTML, OpenOffice, universal, & X11. Your chosen colors can be returned in the most popular color-space models including hexadecimal-RGB, RGB, HSL, HSB, HCG, or CMYK, or when using named-colors their names can also be returned. The different graphical color-pickers each look at the different available color-spaces in a different way, giving you complete intuitive control over finding the exact color you want. Best of all, you can work with one color-space graphically, while outputting the corresponding conversion value from another color-space.
check out the ☺ *free* ☺ MasterColorPicker package: delivering all the color you can handle:
http://softmoon-webware.com/MasterColorPicker_instructions.php
You may even be able to incorporate Mr. Grinstead”s color-picker into this project – it was designed to manage as many pickers as you want