About Color Coder II

Color Coder II is a small, easy to use, and very helpful application that translates any color you can see on your computer screen into the RGB decimal and hexadecimal codes you need to create web pages and other programs. Color Coder II also adds support for HSL (hue, saturation, lightness) color settings.

Color Coder II allows you to choose colors several different ways:

  • Use the eye-dropper to "pick up" any color you can see on your monitor. Color Coder II will quickly find the RGB decimal and hexadecimal codes, plus the HSL values, for that color.
  • Set decimal RGB (red, green, blue) values using the spinner boxes or enter the six-character hexadecimal code in the text box.
  • Use one of the two dropdown lists. The "HTML Colors" list shows the "X11 Colors" recognized by the W3C organization. These colors can be used by name (instead of code) in web pages, CSS stylesheets and Windows applications. This list can be sorted by color name or by hue. The second list shows the current System Colors based on how your version of Windows is set up.
  • Use the standard Windows color picker dialog to find a new color, or edit the one you've already selected.
  • Set the HSL (hue, saturation, lightness) values using the sliders or enter values directly into the associated text boxes.

This program is copyright © 2007 by Bruce G. Stumpf All rights reserved.

This program is distributed "as is" and without warranties of any kind, express or implied.

For more information about HTML color codes, see: HTML Color Names and RGB, Hexadecimal and HSL Color Codes – A Brief Tutorial


About the Toolbar
The image at the left shows the Color Coder II Toolbar. When the program is running, a small "tooltip" will appear as you pass the mouse cursor over a button that briefly explains its function. A more detailed description of each button, moving from left to right, appears below.
Eye Dropper Button The coolest feature of Color Coder II (in my humble opinion) is the "Eye-Dropper." It's the real reason I wrote the program. Too many times I saw an interesting color on another web page or in some other window on my screen, but it was often a case of tedious trial and error to figure out the exact codes for that color. With Color Coder II, just click on the eye-dropper and drag it to the color you want. Release the mouse button and your chosen color is loaded into Color Coder II. You will instantly see the RGB and hexadecimal codes. Plus, if the color is one of the HTML named colors and/or a Windows system color, Color Coder II will find and display the color name as well. The HSL values for your selected color will also be displayed. If you right-click on the eye-dropper, you can select the amount of area you want Color Coder II to sample, from a 1 pixel square up to a 15 pixel square. When the sampling area is set to greater than one pixel, Color Coder II will average the colors of all the pixels in the sample area. This is a great way to get a usable estimate of the color of areas (such as in photographs) that contain many different colors that the eye blends together.
Color Chart Button The "Color Chart" button displays the standard Windows color picker dialog box. You can use the color picker to select one of the stock colors, or use it to edit the color you've already selected. You can use the color picker dialog to lighten or darken your selected color, or to experiment with different hues. When you are satisified with the results, click "OK" and the new color is loaded in Color Coder II. (Note: The Windows color picker dialog uses a different format for hue, saturation and lightness (or luminance) than does Color Coder II, which follows the format set by the W3C.
Copy Button The "Copy" button allows you to copy the color codes to the Windows clipboard for easy pasting into the application or web page you are working on. Left-click copies the hexadecimal code; right-click copies the RGB values.
About Button The "About" button displays the Help & Information file you are presently viewing.

Colors can also be selected by directly entering the RGB or Hexadecimal Code, by choosing a color from one of the Color Lists or by setting the HSL Color Values.


About RGB and Hexadecimal Codes

The image at the left shows two ways to select colors by their codes. In the top spinner boxes, you can directly enter values between 0 and 255 for the red, green and blue components of the color. Or, you can adjust the spinners up or down to see the effect on the color.

If you prefer, enter a six-character hexadecimal code for the color in the "Hex Code" text box. Whichever method you choose, Color Coder II will automatically display the code in the other format. Hexadecimal codes consist of six characters from 0-9 and A-F. Each color – red, green and blue – is represented by two characters, 00 through FF, which in the base 16 (hexadecimal) number system correspond to 0 through 255.

To select a method of entering the code, first click on the appropriate radio button to activate the entry method. Only one entry method can be used at a time.

Colors can also be selected using the eye-dropper button or the color dialog buttons on the program's Toolbar, by choosing a color from one of the Color Lists or by setting the HSL Color Values.


About the Color Lists

The image above shows the program's two drop-down lists for selecting colors by name. Once a selection is made in either list, the new color's RGB and hexadecimal codes are automatically displayed.

The "HTML Colors" list shows the "X11 Colors" recognized by the W3C organization. These colors can be used by name (instead of code) in web pages, CSS stylesheets and Windows applications. This list can be sorted by color name or by hue by left clicking on the list (assuming it is activated by first clicking on the radio button).

The "System Colors" list shows the current system colors based on how your version of Windows is set up. If you change the system colors on your computer (by left-clicking on the Desktop, selecting "Properties," then "Desktop," the changes will be reflected in the "System Colors" list.

Colors can also be selected using the eye-dropper button or the color dialog buttons on the program's Toolbar, by directly entering the RGB or Hexadecimal Code or by setting the HSL Color Values.


About HSL Settings

About Hue, Saturation and Lightness Settings

According to the W3C, which sets standards for the World Wide Web, "The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation)."

The image above shows the two ways to set colors by hue, saturation and lightness: (1) Use the slider bars to adjust the settings; and (2) Enter the values directly into the text boxes. As you adjust these values, the color panel will change to display the color you have created.

Color wheel Hue (what we normally think of as "color") is set as an integer between 0 and 360. By convention, red is 0 or 360. Other hues then represent angles moving around a color wheel (the color wheel at the left shows colors changing every 30 degrees). Thus, yellow is 60; green is 120; cyan is 180; blue is 240 and magenta is 300.

The value for saturation ranges from 0% (always producing a gray color regardless of the hue) to 100% (full color). Thus, as you decrease saturation, you in effect add more gray to the color until, at 0% saturation, the color has become completely gray. How dark or light the gray will be is then determined by the lightness value.

The lightness value is also a percentage. A value of 50% produces a "normal" color. Setting lightness to 0% will always produce black and 100% will always produce white regardless of the settings for hue and saturation. Note: This is different from the "Brightness" value found in Photoshop's color picker (the "eyedropper" control). In Photoshop (at least as of Ver. 6), 100% brightness is the equivalent of 50% in the W3C specification. The W3C specification for HSL is also different from the Windows "color picker," which has Hue, Saturation and Luminance values that each range from 0 to 240.

Toward the upper right of the HSL panel in Color Coder II is a small "copy" button that, when clicked, will copy the current HSL values to the Windows clipboard for pasting into another application.

Colors can also be selected using the eye-dropper button or the color dialog buttons on the program's Toolbar, by directly entering the RGB or Hexadecimal Code, or by choosing a color from one of the Color Lists.


Installation of Phonetic Converter

About the .NET Framework

This program will only run on computers that have Microsoft's .NET Framework installed. This software is freely available from Microsoft. The most recent version can be downloaded from http://windowsupdate.microsoft.com.

The .NET Framework – and hence this program – can only be installed on computers running Windows 98, Windows Me, Windows NT, Windows 2000, Windows XP or a more recent version of Windows. (You cannot install the .NET Framework on Windows 95 or earlier versions.) In addition, you must have Microsoft Internet Explorer version 5.01 or later installed on your computer before you can install the .NET Framework.

To test whether the .NET Framework is already installed on your system, click here.


Test for Microsoft .NET Framework

Test for Presence of Microsoft .NET Framework

It appears that your computer have the Microsoft .NET Framework installed.

Internet Explorer reports the following information. If there is at least one version of the .NET CLR (Common Language Runtime) listed below, then your computer has the .NET Framework installed.

Browser Property | Value
Browser Name: |
Browser UserAgent: |
.NET Version(s) Found: |


Installing Color Coder II

Installing the Program

Color Coder II is a small standalone program. To use Color Coder II, simply copy the application file (ColorCoder.exe) and the help file (ColorCoderHelp.chm) to the folder of your choice. There is no separate installation program to run. To run Color Coder II, click on the application file (ColorCoder.exe).

To make launching Color Coder II easier, you can create a shortcut for your Windows desktop. To create a shortcut, open My Computer (or Windows Explorer) and navigate to the folder that contains the Color Coder II application file (ColorCoder.exe). Right-click on the application file, drag the mouse cursor to an empty space on your desktop, release the right mouse button and select "Create Shortcut(s) Here" from the pop-up menu.