WebColorPicker Site Map
WebColorPicker Home HexColorPicker Store HexColorPicker Products HexColorPicker Support HexColorPicker Company HexColorPicker Contact HexColorPicker
WebColorPicker What's New Download Install Manual Public Beta HexColorPicker
Screen shot webcolorpicker, a hex color picker for OS X
Installation
Entering License
Color Files
Accessing
Hex Code Text Box
Color Components
Code Snippet
Color Selection
Settings File
EazyDraw vector drawing application for mac os x
Installing WebColorPicker
Getting Started

WebColorPicker is a color picker plugin designed especially for Mac OS X. It provides color inspection and selection of RGB (Red, Green, Blue) color components in hexadecimal, integer, and fraction specification modes.

If you installing a new version of WebColorPicker, we recommend that you read the README file provided with your downloaded disk image. This documentation will highlight recent developments or contemporary installation instructions. This printed manual is designed for assisting those new to WebColorPicker or the use of hexadecimal color specifications in HTML and CSS documents, and those in need of detailed reference information.

Color Pickers are used to select colors for graphic and text objects in OS X. Normally they are used in a direct fashion, the target object is selected, a color well is enabled and a color indicated on the color picker. Then this color is communicated to the primary application and the the target object assumes the defined color. In some instances the color picker is used as detailed inspector, but normally inspection consists of a simple visualization of the color in the primary color swatch. .

WebColorPicker may be used in this same manner, the user interface is fully consistent with the functionality and use of color picker plugins on OS X. WebColorPicker provides added capability in the inspection and application of colors defined in the precise numerical coded fashion used to specify colors in HTML and Cascading Style Sheet (CSS) source text documents. The added alpha-numeric input fields found on the WebColorPicker are designed to assist designers working with these source code documents.

The above application will be of primary interest to professional designers working in the field of web page design. The compact numerical nature of the WebColorPicker interface is a useful compliment to the default Color Pickers provided with OS X.

Screen shot webcolorpicker, a hex color picker for OS X
Applications

Software developers working on iPhone applications will find the hex and rgb color code capabilities of WebColorPicker useful as well. Inspect and select a proper browser compatible color with one of the visualization views and obtain a "typo" free text code snippet that is ready to paste directly into application source code.

There is specific support for several software languages including ObjectiveC and Java. In a similar fashion WebColorPicker will prepare a defining color declaration statement for instantiating the target object in RGB color space.

If some of the above jargon has no meaning to you, don't worry, these details are available for the professional in the appropriate fields, but the added complexity is minimal and does not in the way for normal RGB color inspection and selection. Many will find this small utility useful because of the ease of use of the sliders or the aesthetic appeal of the color cube.

Installing WebColorPicker

If you are familiar with the phrase "drag and drop install" and the OS X operating system, the paragraph below will be all that is needed of this chapter. If you are less experienced, then the details will probably be interesting learning and will prove relevant for better understanding of your computer and the installation of plugins in the future.

Color Panel Plugin: WebColorPicker is provided as a Bundle Plugin for the OS X system wide color panel. Place the WebColorPicker bundle in the "Color Pickers folder" in either the System Library location ( /Library/ColorPickers ) or a specific local user library ( ~/Library/ColorPickers ). Apple does not want the third party plugin placed in "their" "Color Pickers" folder ( /System/Library/ColorPickers/ ) but we have seen no problems in operating in this manner. For an application to access the color picker you must quit and re-start the application after placement of the WebColorPicker bundle. There is no need to re-boot the system, only a quit and restart is needed. To remove the bundle, all applications using the color picker plugin must quit.

Plugin Bundle: The WebColorPicker bundle is represented in the Mac OS X finder with the icon shown to the right. To activate and use WebColorPicker this Bundle is placed in the "Color Pickers" folder. This is a "magic" folder and placement in this specific location is required.

This design makes it easy to uninstall WebColorPicker, simply remove the bundle from your system. The actual binary image (program) and all the necessary associated files and resources are hidden from view and lumped into this single bundled entity.

If you are interested, you can investigate the contents of the plugin bundle, select the WebColorPicker bundle in the finder, control click and access the provided popup menu - select "Show Contents." Then you will see that the plugin bundle is actually just another folder. If you investigate these hidden folders you'll find the actual binary module.

Screen shot webcolorpicker, a hex color picker for OS X
Entering License

WebColorPicker is a share-ware application. It is not required to pay and obtain a license in order to use the plugin. An unlicensed copy of WebColorPicker is not hindered or limited in any fashion, all features and capabilities are available in the unlicensed mode. Unlicensed copies will present a share-ware notification panel with each initial launch. This notification sequence is removed for licensed users.

A purchased license is a small alpha numeric code. The code is case sensitive. Enter the code by clicking the the Settings button found at the lower section of the WebColorPicker section of the main system color selection panel. See chapter 03 for instructions for accessing the WebColorPicker panel, a host application is required as WebColorPicker is plugin, not a standalone application. Double clicking the WecColorPicker bundle (in the Color Pickers folder) will not launch WebColorPicker.

Preferences File

When WebColorPicker is launched for the first time, a preferences file is created to save persistent settings that are maintained when you quit and return to WebColorPicker. This file is saved in your OS X Applications Support folder that is found in the Home Library folder. This file is in a folder called webColorPicker. Note that since WebColorPicker is a plug-in and not a primary application, the preferences and settings are located in the Applications Support folder rather than the primary Preferences folder. Settings for WebColorPicker will be the same for all applications that use the color picker. The name of the settings file is: Settings.plist.

The plist file is a text file; it may be viewed with any text editor. The text is formated according to XML design conventions and more particularly as OS X property list. Property Lists are made up of arrays and dictionaries. The values are self-documenting with descriptive English language names and values. If you have installed OS X's development tools there is an application called "Property List Editor" that may be used to view or edit the contents of the file.

It is, as you might expect, not advisable to edit or change the contents of the preferences file. It is very easy to damage the file with a simple text editor and this should be avoided. If the Property List Editor is used, the base file format is safe from damage and WebColorPicker would likely be able to work through any errors introduced in this fashion.

Color Files

WebColorPicker installs three color list files. These are placed in Home Library Colors folder. The files end with the extension "clr." The format is an OS X system defined format used for storing lists of colors.

These color lists are installed the first time WebColorPicker is accessed. The actual WebColorPicker panel needs to be selected from the system color panel to cause the initial access. The color lists created are used to provide three standard color lists that are useful for web design and software development.

The color lists installed are named, "CSS Keyword", "Browser Safe", and "SVG Keyword". Named color lists are not required by the WebColorPicker, and many web design projects will not require strict use of these standard colors. Indeed their use is more a historical note at this time as modern web browsers and operating systems do not require limiting colors to a small defined set of acceptable colors. But the color names used in a color list can be helpful and WebColorPicker provides autocompletion that keys off color names present in a color list.

The clr files created by WebColorPicker are available as OS X standard colors to any OS X application that uses the system color picker palette technology. You will see these color lists and their colors with any color panel plugin that works with color lists.

Note, normally one uses the "color wheel" for picking colors. There is an Apple provided color picker for managing the "color list" mode. There you will see the color lists created by WebColorPicker. All standards are followed carefully for creating these publicly available clr files. Problems can arise if other applications are not fully up-to-date with the standards. In particular some older applications do not support transparency and problems can arise, but these are rare now that OS X and most available applications have matured to support the modern standards including the support of transparency. Check the documentation and support resources for the other application if problems arises.

EazyDraw vector drawing application for mac os x
Color Panel
Accessing WebColorPicker

WebColorPicker is a plugin for your main system color panel. In order to access or use WebColorPicker you need to open the system color panel from a hosting application. Hopefully your application's technology base is new enough and provides support for the OS X color panel. If an application's base technology was ported from OS 9 or another operating system it might not integrate with the OS X color technology and you may need to use another application to "host" the color panel.

Host Application Text Edit is always available to act as a host. It is based on the latest OS X technology. With Text Edit the color panel is opened from the Format main menu, Font submenu, Show Colors command.

EazyDraw is another modern "cocoa" app which supports the OS X system color panel. With EazyDraw open the color panel by clicking on any color well, there is one on the Color and Style panel accessed from the top of the Tools main menu.

If your application does not directly support the system color panel you should still be able to drag and drop or copy and paste to your application's documents or drawings using WebColorPicker with one of these applications acting as an intermediate host.

Screen shot webcolorpicker, a hex color picker for OS X
WebColorPickerIcon

WebColorPicker will be only one of the color pickers found on your system color panel. WebColorPicker has a specific job to do, it is not intended to be a complete color selection solution. Each color panel is accessed by clicking on the corresponding icon in the System Color Panel's mini-toolbar found at the top of the panel. WebColorPicker's icon is shown and circled on color panel image above. Click the WebColorPicker icon to explore the three views used for managing color codes with WebColorPicker.

Screen shot webcolorpicker, a hex color picker for OS X
Hex Code Text Box

A Hex Color Code is a hexadecimal triplet representing the colors red, green and blue. A color is formed by adding the corresponding amounts of red green and blue. Each color component is defined over an unsigned integer range of 0 to 255 decimal. This range of integers can be represented by two hexadecimal numbers (which we will call hexadecimal digits). A single hexadecimal digit covers a range of 0 to 15 using decimal numbers for the range 0 through 9 and the letters A through F to represent the numbers 10 through 15.

The most widely used capability of WebColorPicker is to specify and inspect the hex color codes used with HTML and CSS source files. This value is shown top left of the WebColorPicker view, right below the main panel color swatch. The value shown in this field is a hexadecimal number, 6 hex digits long. The value may be preceded by a "pound" sign, the setting for this is found on the Settings view. The "pound" sign is a flag in html to indicate a hexadecimal number follows.

If a color is selected in any fashion the hex code for the color is shown in the Hex Code Box. In a nearly absolute sense the code will correspond exactly to the color showing right above it in the Main Color Swatch. Naturally a color may be selected by clicking on a color in the WebColorPicker color selection view, but the actual hosting application has primary control over which color is present in the Main Color Swatch.

The HexCodeBox accepts text input. When a new hex code is entered WebColorPicker will select the corresponding color and display it in some fashion in the color viewing area. And the entered color is sent to the hosting application.

Note a color that is entered (either by clicking on a color or entering a hex code) is not actually placed in the Main Color Swatch, at least not by the WebColorPicker. The color is sent to the hosting application, the main intent of your actions are to apply a color to something in the hosting application. Then the hosting application will place "a color" in the Main Color Swatch. Note that the hosting application may actually send back a different color, there is no guarantee that it will accept the color selected without modification.

Having explained these operating details, in most cases the operation is straight-forward and a selected color is simply applied to the target object in the hosting application and ends up in the Main Color Swatch with the expected corresponding hex code shown in the Hex Code Box.

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.

Decimal Code Text Box (CSS - RGB)

The Decimal Code Box is found to the right of the Hex Code Box. This field displays the same color (Main Color Swatch, Hex Code Box, and color view as explained above) in the CSS RGB color code format. It is convenient when CSS codes are not needed because is shows the hex color pair values in decimal notation, kind of an on-the-fly hex / decimal crib sheet.

The Decimal Code box is available for copy to system pasteboard. This can be used to save typing CSS color specifiers, pick a color, select the Decimal Code text in the text box, do Copy then paste into the source code file.

The Decimal Code box accepts CSS color specifiers as well. The parser is not elaborate but if the format is reasonably similar to the CSS specifier format the decimal colors are located and fed into the host application. Results are then re-formatted to the strict CSS format.

Named Colors: 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.

If a complete color name, one that matches a name in the selected color list, is entered the RGB field is completed with the corresponding RGB decimal code in CSS format. The color is accepted by typing "return".

Screen shot webcolorpicker, a hex color picker for OS X
Color Components

Below the color inspection view there are 3 numeric text fields; each providing inspection and input for one color component. They inspect and define the Red, Green and Blue components in order from left to right. The values may be 2 digit hexadecimal, integer on a scale of 0 to 255 or fractions on a scale of 0.00 to 1.00. The choice of format is made on the Settings view, the "Comp" (for Component) popup menu selection.

Hex Mode: Each field will accept hex values. Error handling is as described above with single digit entry expanded by duplication. This means that to enter a value such as "FF" it is sufficient to enter only "F". Explicit errors are flagged with a flash message and the previous entry is maintained.

Not Exact Indicator: The fields will indicate in Red when the color presenting in the Main Color Swatch has round off residuals for the associated color component. The details provided above can explain how this can happen. Keep in mind that there are many ways to specify a color and the number of possible colors is greater than the number of colors that the 3 pairs of hex digits can represent. For example if you click on the Color Panel's Color Wheel, the point clicked is not likely to match with one of the specific hex colors. In this situation WebColorPicker shows the actual color and the hex code closest to that color. Normally you will not be able to distinguish the slight difference in shade between the actual exact hex color and the more precisely defined color. But what happens to the two distinct colors in subsequent processing is difficult to predict. So WebColorPicker indicates this small difference by showing the value of the corresponding hex pair in red.

The "tool tip" (the pop-up yellow note, that appears when the mouse is hovered over a text field) will indicate the Hex pair's decimal value and show the residual (remainder) if the hex pair does not exactly match the selected color.

Screen shot webcolorpicker, a hex color picker for OS X
Code Snippet Field

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 Settings.plist ). See Settings File section below for detailed specifications.

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.

Screen shot webcolorpicker, a hex color picker for OS X
Settings

The Settings button replaces the color selection view with a small panel that manages a few preferences settings used by WebColorPicker. The parameters are rather limited in keeping with the focused scope of WebColorPicker. Selections here are automatically persistent. They will apply for all color panels that use WebColorPicker and they will apply when applications are closed and restarted at a later time. The values are saved in a Settings file in the Applications Support folder (~/Library/Applications Support/WebColorPicker/Settings.plist ) see the end of this page, Settings File section for details;

The top check box identified by a "pound" sign is used to include a pound sign in the main Hex Code Box text. When checked the pound sign is included. This "pound" sign character is a key in HTML coding that signifies a hexadecimal number. It is a user preference to included this in the text provided by WebColorPicker.

WebColorPicker can work with upper case or lower case hex alpha letters (a, b, c, d, e, f or A, B, C, D, E, F). The popup menu next to the "pound" sign checkbox controls this choice.

The Code Snippet and Code Popup menu were discussed in the previous section, they control the presentation of a Code Snippet or the individual RGB hex codes below the color selection view.

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.

Screen shot webcolorpicker, a hex color picker for OS X
Comp - Component

The Comp parameter determines what is shown in the text/numeric field(s) just below the color selection view. The possible values are Hex, Integer, Fraction and Code Snippet. The default and most common selection will be the Hex value, this displays each component as a two digit hexadecimal number over the range 0 to FF. .

Integer selection will display each component as a decimal number over the range of 0 to 255. Zero means "none" of the designated color and 255 means full maximum saturation of the corresponding color component.

Fraction selection will display each component on a scale of 0.00 to 1.00. For example a value of 0.33 red would be a "dark" red corresponding to a Hex value of 55.

Code Snippet will replace the 3 component numeric fields with one large text field to hold the full code snippet as defined by the selection of the "Code" popup menu selection.

Each of the fields display values as defined by the Comp selection and each field will accept input in define format. So for example entering "FF" when in the integer mode is an error input.

Drag

The Drag setting determines what form a Drag operation from WebColorPicker's color selection view will take. The possibilities are: Color, Hex Code, RGB (CSS) code, or Code Snippet. It is possible to drag a color from the color view to other windows and objects that are visible on the desk top. Normally a drag operation would start from the color view and proceed to another window of the host application. For example, with EazyDraw as a host application you can drag a color to a shape and apply it as a fill for a target shape. Since it is possible to drag a color as a color from the main color panel color swatch (at the top of the panel) it is not so interesting to also drag a color from the Color View. .

When working on coding projects, it is useful to drag a text color code from the color selection view to a text window where one is writing or editing source code. Set the Drag selection to one of the code settings for this mode of operation. Then the color panel will provide both useful forms of the drag operation. Drag a color as a color from the top color swatch and drag a color as a code from the WebColorPicker color selection view.

Resize

The Color Panel is a re-sizable panel. So it is possible that all the settings may not be visible if the panel is adjusted to a smaller format. Rather than simply making the panel larger which can be annoying WebColorPicker omits the bottom most parameters and shows a "red arrow indicator" to signify that some parameters are not available for the current view size. Resize the window if access is needed to one of these hidden parameters.

Help

The Help - question mark button brings you to this web page. A PDF version of this documentation is available as part of the WebColorPicker download.

EazyDraw vector drawing application for mac os x
Color Selection View
Refer to Features Page

The central portion of the WebColorPicker view will have one of 3 possible color selection views. These are discussed in detail on the Features page of this web site. Follow the link in the previous section to learn about this portion of WebColorPicker .

EazyDraw vector drawing application for mac os x
Color Selection on OS X
Color Wells

This section is a general discussion of the use of color wells with the Mac OS X operating system. The topics discussed here do not relate specifically to WebColorPicker. If you are experienced with inspection and specification of colors on OS X, there will be no need to study this section.

The OS X system color panel, which has been the topic of this manual, is often used in conjunction with a color well (see the figure on the next page) to change and inspect a color attribute. This chapter will discuss general behavior that a user can expect when using color wells on OS X. We will use EazyDraw as an example host application, but the actions described are common several modern OS X applications that follow Apple's guide lines for color selection.

A single host application may have more than one color well. Typically a single application will have several color wells. For example one color well may select text color and another will specify document background color. All of these color wells will abide with the same general principles.

A single color panel is used for all color changes and selections. In summary, the organization is: a host application with several color wells, working with one color panel, that has a specific color picker in use. All color wells and perhaps other attributes such as text (font) color may be used with the single color panel. The panel shows the current color in the Main Color Swatch at the top of the panel, use this visual clue to confirm the object of actions for the color panel.

Active Color Well

For the palette shown below, the Fill color well, (top one on the left palette) is the active color well. The Color Picker on the right is reflecting the state of the Fill color. Notice that the active color well has a darker border. The Outline color well has light border and is NOT active in the snap shot below, The Stroke color is not shown on the Color Panel's main color swatch.

It is important to learn to notice the change in appearance of a Color Well when it is active and connected to the Color Panel and corresponding Color Picker. Only one Color Well is active at any given time. The active color well has a darker border to indicate it's state.

A single host application may have more than one color well. Typically a single application will have several color wells. For example one color well may select text color and another will specify document background color. All of these color wells will abide with the same general principles.

Deactivate a color well by clicking it when it is active. This means it is possible that no color well is active. This can be confusing, as changes to the color are not reflected anywhere in the host application. This is useful for making up new colors or experimenting with colors without modifying your work in the host application.

There are many ways to chose colors, the buttons at the top of the Color panel are used to select the color picker method.

Active Color Well

For the palette shown below, the Fill color well, (top one on the left palette) is the active color well. The Color Picker on the right is reflecting the state of the Fill color. Notice that the active color well has a darker border. The Outline color well has light border and is NOT active in the snap shot below, The Stroke color is not shown on the Color Panel's main color swatch.

It is important to learn to notice the change in appearance of a Color Well when it is active and connected to the Color Panel and corresponding Color Picker. Only one Color Well is active at any given time. The active color well has a darker border to indicate it's state.

A single host application may have more than one color well. Typically a single application will have several color wells. For example one color well may select text color and another will specify document background color. All of these color wells will abide with the same general principles.

Deactivate a color well by clicking it when it is active. This means it is possible that no color well is active. This can be confusing, as changes to the color are not reflected anywhere in the host application. This is useful for making up new colors or experimenting with colors without modifying your work in the host application.

There are many ways to chose colors, the buttons at the top of the Color panel are used to select the color picker method.

Screen shot webcolorpicker, a hex color picker for OS X
Opacity

The Opacity slider and numeric entry field, near the bottom of the color panel, allows transparency to be applied to a color. Transparency is applied to colored attribute by specifying a color with transparency. When transparency is in effect the associated color well will draw both the master opaque color and the transparent color over white with a diagonal separator.

There are several other terms for Opacity. In some cases it is called Transparency. A common nomenclature is to refer to Opacity or Transparency as the "Alpha" channel, or colors with Alpha. In Objective C the term used for opacity is Alpha.

Simple hex color codes used for HTML or CSS source code do not use opacity so the opacity or alpha value of any color has no impact on the primary hex code or RGB color specifiers found just above the WebColorPicker's color selection view.

Alpha values are used with several of the language constructs supported in the Code Snippet field (see chapter 03). Opacity values generated on the color panel or inspected values from the host application's target attributes are sampled and provided in the appropriate fields of code snippets that accept or expect alpha channel specification.

Color Spaces

Mac OS X and other modern computing systems support several methods for specifying colors. WebColorPicker works with Reds, Greens, and Blues (and alpha as described above). These are called RGB colors (RGBA when alpha channel is used). Examples of two other color spaces are Cyan-Magenta-Yellow-Black (CMYK) and pattern colors. Pattern colors were mentioned earlier when discussing color lists. We note that these other color spaces will not work with WebColorPicker as elements of this user interface are designed explicitly for reds, greens and blues.

When non-RGB colors are in use a small darkened triangle is shown in the upper right hand corner of any color well containing a non-RGB color. The presence of this mark indicates that the color is not RGB. WebColorPicker will try to convert a non-RGB color to corresponding rgb components.

Color Swatches

The small boxes at the bottom of the Color Picker panel are color receptacles or swatches. You may drag and drop to and from these swatches. They are convenient places to hold a set of colors being used in a drawing. If you enlarge the width of the color panel more swatches are provided. There is a small slider button that is used to enlarge or hide these color swatches.

Color swatches are saved in a normal color list (*.clr) file in the Colors folder. The storage of these color lists was discussed in chapter 02.

EazyDraw vector drawing application for mac os x
Settings File
WebColorPicker Settings File

This section provides detailed description of the contents of the Settings property list dictionary for WebColorPicker. The information in this chapter is not required for normal use of the WebColorPicker. This would only be of interest for user experienced with plist files or those needing to make advanced configuration changes for WebColorPicker.

The Settings file is found in the Applications Support folder in the user Library hierarchy ( ~/Library/Application Support/WebColorPicker/Settings.plist ). The file is a plain text file and my be manipulated with a text editor or with the Property List Editor utility provided as part of the OS X developer tools.

If a text editor is used to make changes to the file, care must be taken not to compromise the property list structure of the file. Corruption could cause host applications to crash and fail to launch. It is advised to use the Property List Editor to make changes to the Settings file. If the Property List Editor is used, the core integrity of the file structure will remain stable and errors in this case would not likely cause problems when read by WebColorPicker.

If corruption does happen and applications fail to launch, remove the Settings file from the WebColorPicker folder and re-launch corresponding applications. If WebColorPicker is launched without a Settings file, one is created with Factory Default conditions.

pList Elements

The Settings file contains a dictionary of xml elements consisting of arrays strings and sub-dictionaries. These are accessed by keys. The keys are descriptive and self documenting. The corresponding elements should be clear as to their use and meaning. A few of these elements are more complex, for these documentation is provided below.

Create Color Lists: WebColorPicker provides three color lists for use with WebColorPicker and by other applications and color interface elements available on the installed system. These are installed in the Colors folder of the user's home Library folder (~/Library/Colors ). The color lists are created, initiated, and written to this folder at first launch of WebColorPicker. They are re-created if they are removed and WebColorPicker quits and is re-started.

Since this is a public system folder, there may be a rare instance where these color tables are not desired. To "turn off" this behavior set the CreateColorLists string to "NO". This disabling option is only available by direct manipulation of the Settings.plist file as described here, there is no element for this in the user interface.

Code Snippets

This element is an array of dictionaries. These are an available resource element that can allow an experienced user to add or modify the format of Code Snippets that are managed by WebColorPicker. The description of the use of Code Snippets above should be read and understood before reading the following documentation.

Note that Code Snippets need to be enabled at least once in the WebColorPicker user interface to trigger creation of the CodeSnippets dictionary. The dictionary should be created before additions are made, this will provide a precise template to follow in the formatting of additions to the dictionary.

Each Code Snippet format has a dictionary entry of three elements each with a defined key. To add a new Code Snipped format a new dictionary with the proper form of three elements with the required defined three keys. These are now defined.

KEY: NameSnippet - The NameSnippet key identifies a string. The string is the name that will appear in the Code popup menu on WebColorPicker's settings view. The name should be descriptive and should be unique with respect to all other Code Snippet entries.

KEY: FormatSnippet - The FormatSnippet key identifies a string. The string is a C - unix (or ObjectiveC) format string that is used as a template into which a defined list (see next key) of argument values is substituted. When WebColorPicker is running and a Code Snippet is generated this exact format string is used with the "stringWIthFormat:" Objective C function call. Complete precise documentation can be accessed from Apple's web site, a google of the function call will provide access to the documentation for those not familiar with the use of formatted strings and associated argument variables.

KEY: VarsSnippet - The VarsSnippet key identifies a string that is itself a key which will define one of a few forms of arguments that are provided as the arguments to compiled stringWithFormat statement. The possible values are tabulated and defined below.

The entries defined below are the only allowed arrangement of color arguments available. If another variation is needed please contact WebColorPicker support at WebColorPicker.com and the addition can be integrated into the next release.

rgbFixed - The arguments are 3 integers, 32 bits each. They correspond to red, green and blue components on a scale of 0 to 255. 0 being "dark", 255 associated with full saturation of the corresponding color.

rgbFloats - The arguments are 3 floating point numbers, 32 bits, not doubles. They correspond to red, green and blue components on a scale of 0.0 to 1.0. 0.0 being "dark", 1.0 associated with full saturation of the corresponding color.

rgbFixedAlphaFloat - The arguments are 3 integers, 32 bits each and one floating point number 32 bits (not double). The integers correspond to red, green and blue components on a scale of 0 to 255. 0 being "dark", 255 associated with full saturation of the corresponding color. The floating point number corresponds to the value of the alpha channel opacity value (explained above), Zero corresponds to fully transparent and 1.0 corresponds to fully opaque color.

rgbsFloats - The arguments are 4 floating point numbers, 32 bits each, not doubles. They correspond to red, green, blue, and alpha components on a scale of 0.0 to 1.0. 0.0 being "dark", 1.0 associated with full saturation of the corresponding color. For the alpha value zero corresponds to fully transparent and 1.0 corresponds to fully opaque color.

rgbPackedInt - The argument is a single integer of 32 bits. The rgb values on a scale of 0 to 255 are packed into the low order 6 hex digits. Red component stored in bits 23 through 16, green in bits 15 through 8, blue in bits 7 through 0.

rgbaPackedInt - The argument is a single integer of 32 bits containing red, green, blue, and alpha channel information. The rgb values on a scale of 0 to 255 are packed into the least significant 6 hex digits. Red component stored in bits 23 through 16, green in bits 15 through 8, blue in bits 7 through 0. The Alpha channel value is stored in bits 31 through 24. Values are naturally unsigned. This is the format used in the Java language Color(...) function call.

This web page designed, with BBEdit and EazyDraw using WebColorPicker.
WebColorPicker and EazyDraw, Dekorra Software for Mac
Contact: ph +1 608 444 5245 fax: +1 608 635 2124 mail: N5040 Beach Garden Road, Poynette, WI USA.
Copyright 2009, All rights reserved.