DuckBytes Color Picker

This Online Color Picker grew from two impulses, I couldn't find one on the web when I needed one, and I felt I needed to hone my JavaScript/CSS skills. For years I've felt that the browsers were too divergent and non-standards compliant to make JavaScript and most CSS worth the development time. I now feel that both Microsoft and Netscape, as well as the smaller browsers such as Firefox and Surfari, have come close enough to each other and to the standards that it's possible to develop cross-browser compatible web applications without 5 pages of browser detection clogging up the works.

I won't go into detail here but essentially this application utilizes the graphics handling features of PHP and the GD library, combined with the user-interface capabilities of JavaScript and Cascading Style Sheets to create an interactive, web-based application. For obvious reasons, most of the bells and whistles won't work in older browsers, but it will remain functional and useful even for browser-impaired users!

Color is 3-dimensional, there are three distinct properties that make up a given color:

Hue - This is what most people think when they say "color". It describes the redness, greenness, or blueness of a color. In the RGB model, light is divided into three colors—red, green, and blue—and all other colors are made of combinations of those three primary colors. Mathematically, hue is defined by the spectrum of colors produced by setting one color channel to 0, another to 255, and varying the third color channel from 0 to 255 (or down from 255), then leap-frogging through sets of 256 hues for a total of 1536 possible hues.

Does that make sense to you? If so I want to hire you. It took me two days to work that out.

That's what the rainbow bar at the left is. It's been reduced to 512 distinct colors for the purposes of display, but it's the range of hue values available in a 24-bit color space (3 color channels times 8-bit resolution) such as most computer monitors.

Saturation - In real life, saturation is a function of how "pure" the light reflected from an object is, or how close to a single frequency or hue. Mathematically, saturation is decreased by adding white to a color and increased by removing white. Adding and removing "white" is a simple matter of adding or subtracting from all three color channels. The kicker is that you have to do it proportionally, not equally, in the three channels to maintain the same hue and luminosity! That one took me disturbingly long to figure out, too.

Luminosity - Contrary to intuition, this really isn't the amount of lightness, but rather the lack of darkness. Yeah, I know, semantics, but I had to wrap my mind around that before I could figure out what needed to happen mathematically along the vertical axis of the "select a color" pane. You see, it's generated by removing "white" from the starting values of hue and saturation along the horizontal axis.

That's pretty much what's going on here. You choose a Hue to take the third dimension out of the picture, then I generate and display the remaining two dimensions for you to choose from. When you select a point in the Select a Color pane, the color is rendered in a couple different ways so you can see how it will look in various uses.

You can enter a hue (your base color) directly by adjusting the numbers in the appropriate fields. If you break the rules by trying to generate an "impure" color, you'll be duly slapped on the wrist. You can also enter desaturation and darken values (X and Y coordinates) from the Selected Color pane.

The X and Y coordinates you last selected are displayed next to the marker. You can turn the marker off—to select another point underneath it—by clicking the little green button on the end. You can turn it back on by the link under the info table in the third pane.

When you select a color, the last selected color is shown near the bottom of the third pane. This is so you can see the difference from your last color. Personally, I found it somewhat distracting, so I added a little link so you could turn it off.

Enjoy, explore and use it! If you have any comments or suggestions, be sure to drop me a line.

Bruce Quackenbush