WebColorPicker is a plugin addition for the Mac OS X operating system. Once installed it is accessed from the main OS X color selection panel (usually recognized on OS X by the colorful "color wheel"); it is available for integrated use with any OS X application that uses the system wide color selection panel. At the time of this writing (circa Leopard) Apple provides 5 color pickers, the "color wheel" and 4 others.

The Apple standard color selection mechanisms are not particularly appropriate for those doing web design with HTML or Cascading Style Sheets (CSS). Software developers often need to programatically specify colors using declarative statements. WebColorPicker provides several features to enhance the color selection, specification and inspection process for these situations.

At the core, WebColorPicker supports inspection and setting of colors as HTML color codes which use Hexadecimal doublets to specify Red, Green, and Blue additive color components. Paste "in" a color code from a text editor to see the color. Pick a color with a mouse click then paste a ready to use color code into the html or software source code.

In the extreme WebColorPicker has quite a few tricks that a professional web designer or software engineer can incorporate into a work flow to save keystrokes and improve productivity. WebColorPicker understands CSS shortcuts (#333 -> #333333), and manages defined scope color lists like "web-safe" or "SVG Keyword".

WebColorPicker was originally designed to be used with EazyDraw. Web design professionals (and amateurs) requested the ability to input hex color codes, something they need to do frequently. The OS X color picker system supports rgb color component specification but not in the hexadecimal form. Hence EazyDraw users (and the EazyDraw developer) were required to have the calculator and various hand written crib-sheets when working with source code that presents colored graphic objects. As the new color picker was implemented it immediately became an "always open" palette for graphic design and software development projects. This lead to the independent packaging as a general use color picker plugin.

The fundamental capability of WebColorPicker is to be able to input and visualize formated color specification text fragments. For example, paste "#ffa500" into WebColorPicker and immediately see that it is orange. In a complimentary respect, using the SVG color list click on a orange color swatch and paste the color code into a text based source code file.

WebColorPicker also serves as an enhanced RGB color selection tools. The three views and various numerical fields provide more flexibility and specification methods compared to the standard OS X RGB sliders.

To facilitate this basic operation WebColorPicker provides 3 different color selection views to conveniently visualize different defined color spaces available to source code developers and web designer on OS X. These are Hex Sliders, Palette, and Cube.

The Slider View provides six sliders that allow convenient (no typing) specification of the six hex digits that define a unique color code. Each slider will respond to a click, or a click and drag setting the corresponding hex numeric value. The specified color is automatically computed and entered in multiple ways: as a hex code, as an rgb code ( rgb(255, 165, 0); ) a color swatch, and optionally a code snippet. Any of these, the actual color or the text, can then be dragged to any open document or drawing. The color defined by the sliders is a precise hex color with no residual leakage into the full 32 bit millions of colors color space, which may be important in some situations.

To use as an inspector select a color on a drawing or document and immediately see the three hex components. The components are visualized by the quantized positions of the sliders and the hex numeric values displayed. If the color is not precisely a hex color the numeric values are shown in red with the residual accessible as a tool-tip.

A shift-click will "tie" the two sliders to work in unison, creating the common shortcut color codes with doublet hex digits, for example, #333333 or #cccccc. This is a more conventional shorthand than completing with zeros for the least significant hex digits (#666666 instead of #606060).

Entry errors for hex code values are handled intelligently while complying with the strict 6-hex-digit format. Missing values are not set to zero, they are in general expanded by duplication of least significant digits. For example a 3 hex digit short cut entry is allowed, the 3 values entered are expanded to 6 by duplication. For example, enter 369 and the value is expanded to 336699. If there is no logical expansion for an otherwise erroneous input, an error message is flashed over the color view and the previous value is retained.

The color cube is a web-designers version of the continuous color wheel. It is a cube visualization of the discrete 256x256x256 color space use for html, CSS, and various programming languages. The number of colors shown is adjustable from a ring size of 8 colors up to a ring size of 16 colors. As described with the other two views, full bi-directional support to and from text editors or graphic design applications is supported.

The Color Cube is a variation on the Color Wheel. It is rotated to provide red to the left, green in the center, and blue to the right in keeping with the rgb convention of web color codes. The color cube is "quantized" to show only the colors corresponding to exact hex codes. It is further quantized to allow selection from a reduced set of specific hex code colors. And it is has a scheme to vary saturation (brightness and darkness) along the rings of the cube. This allows the inner rings to display the more saturated colors that need fewer shades.

The colors presented in the cube are all computed, they are not derived from the selected color table. Only the Palette view derives the visualized color swatches directly from the color table.

Each color swatch of the color cube is a triangle. A color is selected by clicking on one of these triangles. If a selected color matches one of the color cube colors the corresponding triangle color swatch is indicated with a black border.

The Palette view shows a color swatch for each color of a Color List. Color Lists are special OS X files that contain a palette of distinct colors each identified by a unique (to the list) name. These files have the system file name extension ".clr". The color list files are found in the special folder named "Colors" in the user Library file hierarchy (~/Library/Colors/ ).

The menu has commands for adding and removing color lists from the menu. Initially WebColorPicker shows only the 3 color lists that ship with WebColorPicker. Use these commands to use other color lists and customize the menu selections.

The Browser Safe list, sometimes called Web Safe Colors, is a set of 216 colors that are commonly considered to be the "web-safe" color palette. These are a set of colors that are likely to be shown without dithering on systems using only 256 colors. These were useful in the early days of computing. The use of these "web-safe" colors is no longer critical especially if the viewing audience is primarily Mac based. The historical use of the colors have made them familiar to web designers and often found in existing web designs. Their use today is primarily is concert with this familiarity. This palette is a good general set of colors and shades spanning the rgb spectrum.

The CSS Keyword palette is a smaller set of colors identified with standardized names. It is handy when needed for CSS coding projects or for design projects that should be limited to a very few colors, such as GIF graphic design.

The SVG Keyword palette provides standardized color names that are recognized by all major browsers. These descriptive names are useful for finding colors according to artistic names with quantized hex code specificity. The Decimal code box will accept these names as input with auto-completion, for example type in "cr" and autocomplete will give you: "crimson: RGB(220, 20, 60);" click enter and you have hex code: "#DC143C" -- as simple as that a matched browser color with hex code from entering only two letters of a descriptive color name.

The Color Name popup menu provides a menu method for selecting a color. It will also show a color name when a selected (the color in the Main Color Swatch) color matches a color in the current color list. If a color does specifically match one of the palette colors the matching color is outlined in the color selection view and automatically selected and displayed with name in the Color Name popup menu. If the selected color is "close" to a color in the color list the name is shown in the popup menu with an asterisk to indicate "close but not exact" match. In this latter case the popup menu will have the matching color moved to the top of the menu for convenient selection.

The Decimal Code Box accepts input of named colors as well as rgb CSS color specification statements. The names recognized in this field are names from the selected color list, which is shown immediately below the color selection view. The field provides auto completion for typed entries. If matches are found in the color list, the completed available colors are shown in a flash up temporary right below the entry, on the color selection view. The names are provided there as clues for continued typing.

These color names are used in the CSS/RGB Decimal text field for identification and autocompletion. Typing the name of a color present in the selected color list will set the selected color accordingly.

The color selection view shows exact matches to specific color list colors with a black outlining rectangle. Close matches are indicated with red outlines. This provides a method to select a palette specific color that is close to to a color selected from the continuum.

Notice that there is a different meaning for the red "close match" indicating rectangles shown on the color view and the red text used in the hex colors values. The red text means that the selected color does not match any hex code and the red indicating rectangles indicate that a selected color, which may be an exact hex code, does not match a color in the selected color list.

The Hex Colors fields may be replaced with a Code Snippet field. The change is made by clicking Settings and checking the Code Snippet checkbox. The panel to the right shows selecting the Code Snippet mode. It is a two step process, the check box will cause Hex Codes to be replaced with Code Snippet. Then the actual format for the code snippet is selected from the popup menu named "Code."

A Code Snippet is used to automatically create a line of software code that can be used as a color specification or instantiation statement in a particular programming language. If this is not making any sense to the reader - just skip the section as this capability likely does not apply. If on the other hand you make a living writing software you probably have already figured it out and can skip this section as well. For completeness we shall continue.

The Code popup menu, accessed by clicking Settings, determines the format of the Code Snippet. There are selections for different programming languages and different forms for each language. Inspection is the best way to determine the meanings of each selection, changes are reflected immediately in the Code Snippet text box.

Formats for code snippets may be modified or new ones added using a text editor or the OS X utility application Property List Editor. Each entry in the Code popup menu is defined by a dictionary with three strings located in the WebColorPicker Settings file found in the Applications Support folder (~/Library/Application Support/WebColorPicker/).

The Code Snippet will reflect the current color. The text field is selectable so the line of code may be copied from the text box and pasted directly into source code.

It is more likely that you will want to drag a code snippet directly from the color view to the code. This is enabled on the settings panel by specifying Code Snippet for the "Drag" selection. This can be important if your text editor is accepting colored text. If you copy and paste is possible that the host application will paste colored text into your code, normally an undesirable situation. When a code snippet is "dragged" from the color view WebColorPicker momentarily resets the color panel's color back to black during the drag operation so the pasted code snippet will not be inadvertently colored.