?

Log in

phantom gray

The ProColor color-picker

I'd like to talk a little bit about web coding, specifically client-side Javascript and DOM coding.

For CMXpress, I needed a good drop-down/pop-up color-picker for use with Prototype, and it seemed to me like such a thing ought to be an easy thing to find, but in reality, it turned out to be as rare as a blue moon. There are some basic controls out there, some with irritating popups, some with tolerable design but ugly licensing, and I couldn't have any of that. CMXpress is open-source, under the BSD license, and I needed something that would play nice with that. I also needed something that would play nice with Prototype, and that ideally would be friendly to your garden-variety end-user and that would also ideally look like a control that was native to the browser.

So, since nothing fit the bill, I built ProColor. You can see a screenshot below, or you can visit ProColor's website and download yourself a copy.


In a future posting, I'll talk about how ProColor works internally. And if you want to learn how to use it, that's well-documented on ProColor's own website. Here, I'd just like to spend a little time elaborating on what it is, why it is that way, and what it can do for you.

What is it?

ProColor is a color-picker: It lets end-users choose RGB colors, and it records the chosen color either in its Javascript object or in an input field (or both). They can choose them by sliding the slider, moving around the color wheel, picking a color from a palette of "web-safe" colors, or typing in absolute values. It's smooth and fast, even on Internet Explorer, and "feels" like a built-in popup box in most web browsers (with Safari being the notable exception, since it's styled to look very Windowsy).

It's implemented as a single Javascript source file with some associated images, and the Javascript source file is available in compressed form. It works properly on most modern browsers from IE6 upward, and has been tested on IE, Firefox, Opera, Chrome, and Safari. It is accessibility-friendly, too, since it responds to keyboard events, has its internal controls able to take the focus, and can readily fall back to just a simple text field if necessary. It's easy to insert into your sites, too, since it can be implemented with almost no Javascript coding (and can even be implemented with no Javascript coding on your part in many cases).

Why is it designed the way it is?

ProColor has several features that are designed to come together from a user-interaction perspective. First, it has the color wheel, which is arguably more artist-friendly than the color wash or color wave used in some color pickers. Yes, Photoshop uses the color wave model, but artists are taught to think in terms of the color wheel, so ProColor uses the color wheel to stick to artists' mental model.

It also displays the color palette. Some people may wonder why there's a color palette when you have a color wheel, but there are good reasons: First, the color palette consists only of "web safe" colors, and some web designers may prefer those for compatibility. Second, a good user-interaction axiom is to present users with a few initial options and then let the user choose one and alter it, rather than forcing the user to choose everything from scratch, and ProColor believes in that: A user who wants a shade of dark red, for example, could go the long route of choosing red on the wheel and then dark on the slider, but that's two clicks just to get to an initial value: But with a color palette, the user can click "dark red" directly to choose the initial color, and then alter it with the other settings. The color palette, in short, makes users able to "design" their colors faster.

It displays the RGB value in two different forms, the #hex form in the input field (using a variety of formatting options), and the raw decimal values in the input boxes. This lets users type in exact colors, and they can tab between the input fields.

It displays the HSB value as well, since some users want to be able to work with that.

It does not display a CMYK equivalent, since the web's colors do not match those from printers very well.

And all of the fields respond intelligently to the keyboard: The wheel and slider move with the arrow keys and shift and ctrl and home/end/pageup/pagedown; and keys like Esc and Enter/Return close the popup, as you'd expect.

What can it do for me?

For one thing, it's free, open-source, and well-documented. You have no excuse not to use it, other than page-load times, and in the age of broadband, that's a poor excuse.

For another, it's incredibly easy to use. It can be attached to any <input> element on a page, and it even has an incredibly easy form where you can write this:

<input type='text' class='procolor' value='...' />

By simply adding "procolor" to the input field's classname, that input field will automatically have a color-picker dropdown button displayed beside it. Or you can create ProColor objects dynamically in your Javascript. The library is very flexible, and very customizable, and is designed to easily fit into any page you can throw at it.

In short, if you have a page that ever asks users to type in colors, you can use ProColor to significantly improve the user-friendliness of your page.



In my next few postings, I'll spend some effort talking about how ProColor works.  When I built ProColor, I found that there was very little good documentation out there on how to build good, native-feeling Javascript controls, and I think it'll be useful to tell people what I learned.  I think the sequence of blog postings will go something like this:
  • ProColor's overall design
  • How web based color-pickers work
  • Building popup windows in Javascript
  • Capturing the mouse
If you have anything else you'd like to know on this or a related topic, feel free to suggest it, and I'll be happy to cover it.  Information is a good thing :-)

Comments

(Anonymous)

Excellent work that man!

Not only is it one single and clean javascript library, but the images are easy to place in their own subdirectory too.

Very impressed. Some of the others that I have looked at have horrible markup (tables etc) and were a real pain to get going.

Thanks. How do I send you a beer?