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:
- The W3C SVG pages
- The SVG Wiki
- The SVG Tutorial at w3schools.com
And some commercial resources:
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:
- Download the Adobe SVG Viewer here
Version 3.0 or later is required
I recommend using the following browsers with ASV:
- Apple Safari on MacOSX 10.3 or later
This is the only browser on which keyboard events work correctly. - Mozilla/Firefox
Note that key presses won't be detected. - Internet Explorer on Windows
There are some bugs due to an unknown JScript error.
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.
- The most noticeable thing about the Color Picker is the color wheel. You can click on the rainbow-ish area of the wheel to select a color, or click and drag the color wheel arm to choose a color. Your selected color will appear in the center.
- The color wheel toggle initially looks like a minus sign at the bottom left corner of the color wheel. Click it to hide the outside "rainbow" part of the color wheel, and click the toggle again to show it.
- At top is the color information area. Your selected color will appear as RGB values, hexadecimal (Web) values, and CMYK values. You can select, copy, and paste these values as needed into other applications. As you move the mouse around, these values will reflect the color underneath the mouse. If the color is in the "Web safe" 216-color palette, the hexadecimal value will be underlined.
- The saturation and brightness scrollbars allow you to change the saturation and brightness (aka value) of the selected color. You can drag the scrollbar widgets or click anywhere within the scrollbars to change color.
- In the same manner, you can select colors by using the red, green, and blue (RGB) scrollbars at the bottom right of the main application panel.
- The multicolored grid area is the palette. You can click on any tile within the palette to select a color. Click on the palette size toggle (the plus sign below the palette) to expand or shrink the palette size as needed. Click on the palette name to change the palette.
- As you move your mouse over the palette, you'll see the some colors change in the color preview pane, just below the palette. The preview pane is slipt in two parts - the left color is the currently selected color, and the right color is the color you're moving over. As you drag the color wheel around, you'll see the colors change in the preview pane as well.
- Above the palette is the color mixer, which allows you to mix two colors together.
- At the upper right is the custom color scheme panel, with which you can experiment with your own color schemes in a variety of layouts.
- At the very bottom is the custom palette, where you can keep and modify a working set of colors. Click once on an empty square to fill that space with the selected color.
- All of the small triangle icons are menus - hold the mouse button down on one and a menu will appear from which you can make a selection.
- Click within the sliders and the color wheel near a gray tick mark to snap to that value. The color wheel has tick marks every 30 degrees. The saturation and brightness sliders have quarter and third marks and marks at 10, 20, 80, and 90 percent. The RGB sliders have marks at 50 percent and every 20 percent which snap to Web safe colors.
There are a number of well-known built-in color schemes you can use to experiment with. To change a color scheme:
- Click on the color scheme name (to the upper left of the saturation scrollbar), or
- Hold the mouse button down on the triangle to the left of the color scheme name. A menu will appear allowing you to select the 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:
You can drag color tiles from:
- Any color slice in the middle of the color wheel
- Any area in the custom color scheme panel
- Any color in the palette
- Any color in the custom palette
You can drop dragged color tiles on:
- Any area in the custom color scheme panel
- Any square in the custom palette
- The color mixer
From the custom palette you can drag color tiles:
- To an area outside the custom palette to remove it
- To another square in the custom palette to move it
- To the color mixer or 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 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.
- Drag a color tile over the mixer (without dropping) to preview what the gradient would look like if you dropped the tile at that location.
- Hold the mouse over the color mixer and the color preview pane will reflect the color at that location.
- Click anywhere in the color mixer to select the color at the location where you clicked.
- Click on the "X" icon to the right of the color mixer to reset it back to its default (a white to black gradient).
There are a number of text fields in which you can enter values to specify colors:
- Click once in a text field to highlight the field, then enter the value you wish and either press enter (return) or the tab key.
- Press the backspace key if you make a mistake.
Once a text field is selected, you can use the following keys:
- The up and right arrow keys increase the value by one.
- The down and left arrow keys decrease the value by one.
- The home key inserts the minimum value (0).
- The end key inserts the maximum value.
- Shift-arrow key increases or decreases the value by 5.
- The page up and page down keys increase or decrease the value by 10.
- Shift-page increases or decreases hue (angle) value by 30.
- Shift-page increases or decreases brightness and saturation values by 25.
- Shift-page increases or decreases RGB and hexadecimal values by 51. This allows one to easily move between web-safe colors.
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.
Color Picker was influenced by ideas in a number of applications. If you like Color Picker, please support these tools.
- Painter's Picker, a color picker for MacOSX
- The Color Scheme Generator 2
- The VisiBone Webmaster's Color Lab
- Color Whore
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:
- Testing the application with other SVG engines/browsers
- Getting keyboard events to work in other browsers/engines
- HTML-to-SVG (and back) communications
- Squashing JScript bugs
Please send email to kev@kevcom.com. Thank you!
1.01 / October 25, 2004
- Color information text is updated when using keyboard shortcuts in expanded scheme mode.
- Tiles dragged from the custom scheme to the custom palette are no longer removed.