Color Picker
Version 1.01, October 2004, under a Creative Commons license.
By Kevin Hughes,

Color Picker is a mini-application written in SVG (Scalable Vector Graphics) format as a way for me to learn SVG and help facilitate its adoption as a general purpose graphics and interface design language. Here's why I think it's so great and what can be done to increase its adoption. I also list a few things I think the language needs to be (even more) suitable to developers.

Here's some good free links for learning SVG:

And some commercial resources:

System Requirements

First and foremost, I recommend using the Adobe SVG Viewer (ASV) plug-in, version 3.0 or later. I haven't tested Color Picker using other SVG engines. The ASV is available for Windows, Macintosh, RedHat Linux, and Solaris:

I recommend using the following browsers with ASV:

Other browsers have not been tested. You can always use the latest version of Color Picker via the Web at:

...or you can download the entire package yourself as a standalone application at the link below. To run, unzip the file and in the resulting directory open the file picker.html in your Web browser.

Color Schemes

There are a number of well-known built-in color schemes you can use to experiment with. To change a color scheme:

As you change schemes, you'll see a number of color slices appear in the middle of the color wheel that correspond to the chosen theme. Click once on a slice to preview its color; click again on a selected slice to select that color. Note that the colors will change as you rotate the color wheel. As you move your mouse over a color slice, its information will appear in the color information area.

For more on color theory and color schemes, try these links:

Drag and Drop

You can drag color tiles from:

You can drop dragged color tiles on:

From the custom palette you can drag color tiles:

The Custom Color Scheme Panel

As you select different colors, the colors in the custom color scheme panel change. Some of these colors are different variations of saturation and brightness, and some are chosen depending on the current color scheme.

To customize the color scheme panel, drag and drop a color tile into any area. You then effectively "lock" that area, preventing it from changing when you select other colors. When areas are customized, or locked, a trash can icon to the right of the panel appears.

Drag and drop colors in customized areas to the trash icon to "unlock" them. You can also click once on the trash icon to remove all customized areas and reset the panel. Move your mouse over the trash icon and all customized areas will be highlighted so you can see which ones you've modified.

The plus sign to the right of the panel allows you to expand or shrink the panel. In expanded mode you can preview the panel, showing the RGB and hexadecimal color codes of each color area. In this mode, move the mouse out of the panel area to hide the codes so that all you see are the colors. In expanded mode you can also drag and drop colors to and from the custom palette.

As colors are perceived differently depending on the size of color regions, the expanded view can be useful in determining the colors to use for projects that require large areas of color.

You can change layouts by clicking on the change layout icon which looks like four small squares and is located to the right of the panel. Some layouts are dynamic and change according to the number of colors in the chosen color scheme. Other layouts are fixed and always contain the same number of color areas.

The Color Mixer

The color mixer allows you to mix any two colors together - drag and drop a color tile anywhere onto the mixer, and you'll see the color gradient within the mixer change.

Keyboard Operation

There are a number of text fields in which you can enter values to specify colors:

Once a text field is selected, you can use the following keys:

There are also a number of other keyboard shortcuts:

h or a selects the hue (angle) text field r selects the R (red value) text field w selects the hexadecimal (Web/CSS value) text field
s selects the saturation text field g selects the G (green value) text field c cycles between color slices
v selects the brightness (value) text field b selects the B (blue value) text field z or u selects the previous color ("undoes" the current color selection)

These shortcuts may come in handy when viewing a layout in expanded mode so you can cycle through colors or make small color changes without having to use the mouse.

Credits & Thanks

Color Picker was influenced by ideas in a number of applications. If you like Color Picker, please support these tools.

A big thanks to CommerceNet for giving me the time and resources to learn SVG and develop Color Picker!


Color Picker is licensed under a Creative Commons license so that you may modify it as you like, although I would appreciate being notified of any changes/fixes that may be useful to incorporate. I could also use some help in:

Please send email to Thank you!

Release Notes

1.01 / October 25, 2004