One of the hardest tasks of a web publisher today is picking colors. If you want to pick a color for your web page, often you have to resort to opening Photoshop or a shareware utility to get the color that's just right. If you use Photoshop, you will still have to convert your color to Hexadecimal (using a handy pocket calculator, if you sport such a fashion statement). A shareware tool may do the job, but in either case, you have to load up another application for the sole purpose of choosing a color. Furthermore, neither solution is free. There has to be a better way.

In an earlier article for Netscape's Web Building Studio, I wrote a DHTML color picker that let you choose your color by adjusting different levels of red, green, and blue. This worked well to convert between RGB values and Hexadecimal values, but was mediocre at picking colors. The problem was that choosing colors in RGB is inherently difficult; you have to understand the additive property of light. In other words, if you want a nice orange-yellow, you have to know that you need three parts red and two parts green. If you want to adjust the overall lightness or darkness of the color, you have to adjust the R, G, and B values individually, and if you don't do it just right, you'll lose your color.

An easier way to choose colors involves using HSB or HLS instead of RGB. These color spaces, as they are called, have been developed as an intuitive way of picking colors. Until now, no in-browser color picker supported these easy-to-use color spaces. With the new DHTML Color Picker 2.0, however, you can have the power of Photoshop's color picker directly inside your browser.

Open Color Picker 2.0
Download Color Picker 2.0

When you open up the color picker, you will see three tabs in the upper-left-hand corner (labeled "RGB", "HLS", and "HSB"). Click on anyone of these tabs to switch to the respective color space.

The large box in the middle is the color you have chosen. The values of the current color for the current color space (H, L, and S for HLS, for example) will appear to the right of the color. The value of the current color in Hexadecimal (for web page use) will appear at the bottom of the window.

You can choose a color in three different ways. First, you can adjust the sliders for the different values (H, L, and S, for example). To do this, drag the white pointers next to the bars. Second, you can enter explicit values. To do this, enter values into the form elements on the right side of the window. Finally, you can enter in a Hexadecimal value into the form element at the bottom of the window.

If you would like to see the complementary or triadic colors for the current color, pick a different item from the "Hues" menu at the bottom of the window. These other colors will then show up in the bottom part of the main color box. You can click on these different colors to pick them as the current color.

In the upper-right hand corner are two smaller color boxes. The one on the left represents the current color (identical to the larger current color box). The one on the right represents the nearest web-safe color. If these colors are not the same, an exclamation point will appear to the right. Click on either the web-safe color box or the exclamation point to jump to the nearest web-safe color.

As I mentioned above, RGB, HLS and HSB are called "color spaces." If you're interested in knowing a bit more how these colors spaces work, read on.

RGB Color Space

The RGB color space is known as a "hardware-oriented" color space. It exists because hardware, such as your computer monitor, needs to know how to display the color on the screen. The R, G, and B values correspond to the relative strengths of the red, green, and blue guns in the CRT. Here is how red, green and blue are combined to make other colors:

Red, green, and blue are known as primary colors - they can be combined to make any other color. For example, red and green combines to make yellow. While RGB may be perfect for hardware, it's not an intuitive color space for picking colors because humans don't think of complex colors (such as vermilion) as combinations of primary colors.

HLS Colorspace

Instead of describing colors by combinations of primary colors, it's helpful to start by thinking of hues. The hue is the part of the color independent of its brightness or dullness. For example, if we wanted to pick a dark red, we would start with a red hue and then simply make it darker by adjusting the lightness. Here is a two-dimensional representation of hue against lightness (with saturation at 100 percent):

The reader is probably asking now, what is saturation? Saturation, unlike lightness, determines how "colorful" a color is. A highly saturated color will be vibrant, like fluorescent yellow, whereas a completely desaturated color will be grey. Here is a graph of hue against saturation, at a chosen lightness of 25%:

Thus, HLS is clearly much more intuitive than the RGB colorspace for picking colors. All you have to do is start with the hue you want, and adjust saturation and lightness until you get the color you desire. No fiddling with primary colors necessary!

HSB Colorspace

HSB stands for hue, saturation, and brightness. It is extremely similar to HLS, except that instead of dealing with how "light" a color is, it deals with how "bright" a color is. If you set saturation to 100 percent, 100 percent brightness in HSB corresponds to 50 percent lightness in HLS. To get a feel for the differences between the two color spaces, it's best to play around with the two and see which one you like better.