image
 
image
Color Tool


Excel App: Color Tool
This tool provides a multitude of different ways to select a color. And when you do, it will slice and dice your color's value and provide it back to you in variety of ways. It simultaneously displays two different scales of your color in each representation - RGB, HSL, and HSV. You can copy any of the output numbers to the Windows clipboard by simply clicking them.

Main Screen
In this screen-shot, you can see the assortment of methods for selecting a color. The tool's output is the banded table with a color patch and set of numbers at the top. However, the colored input buttons are also a form of output. Their colors change when you select a new color. There are two color-harmonies button matrices (the two rightmost blocks of square color buttons). There is also a most recently selected button matrix and a one-column NCS primaries matrix. Clicking any of these buttons causes the clicked button's color to become the current selected color. At the bottom left is an input point represented as a colored rectangle. Clicking on that rectangle brings up Excel's color picker dialog and the color you pick from the dialog becomes the current selected color. There is also a pipette or eyedropper icon centered in a donut-shaped color circle. Clicking that icon will launch your eyedropper tool. The black-background color circle diagrams across the bottom are not active components. They only serve to illustrate the color harmony patterns that are used to arrange the two color-harmonies button matrices.

Output Table
Your color is dissected and placed into this output table across the top of the screen. It includes a color patch to show you your color. The tool selects a suggested font color to go with your color and displays it in a separate color patch below.

The color is shown as both a decimal and hexadecimal representation of what I call an "RGB Word" - a 32-bit number that is arranged in this hexadecimal form: 0x00bbggrr. It is also displayed as an "HTML Word" - a 6-character hex string in this form: rrggbb. Additionally, the W3C CSS hsla and rgba string representations are included. All these outputs are clickable to copy them to the Windows clipboard.

Each of the three representations (RGB, HSL, HSV) is displayed in the output twice. The left hand display of each is always your color in that representation and scaled to a standard set of maximums. For RGB the standard maximums are R:255, G:255, B:255. For HSL the standard scale is: H:359�, S:100%, L:100%. The HSV standard scale is: H:359�, S:100%, V:100%.

The right hand display of each representation is your color in that representation and scaled to the maximums you selected on the input side. If however, you chose the standard scale on the input side, it would be redundant for the right hand displays to repeat that scaling since it is already in the left hand display. In this case, when you have chosen the standard scale, the right hand side is used to display your color in a fallback standard scale. For RGB the fallback standard maximums are R:240, G:240, B:240. For HSL the fallback standard scale is: H:239, S:240, L:240. The HSV fallback standard scale is: H:99�, S:100%, V:100%.

Color Button Matrices
The tool provides four matrices of colored buttons. The buttons are of course clickable, and when one is clicked, its color becomes the current selected color.

The rightmost matrix contains nine buttons arranged in three rows of three columns. The middle button is the current selected color. Each of the three columns consists of the three colors of one split compliment color harmony. The button in the middle row of each column is the split compliment harmony's anchor color and the colors above and below are its split compliments. While the columns contain split compliment harmonies, each row is a triad harmony - one in which the three colors are equidistant around the color circle. And finally, the diagonal starting at the lower left corner and running up to the upper right corner is an analogous harmony that includes the current selected color.

The four-by-four matrix second from the right also contains the current selected color. It is in the bottom left corner. In this matrix, each row is a square tetrad color harmony and each column is a rectangular tetrad color harmony. And as with the three-by-three matrix, the bottom left to upper right diagonal is an analogous harmony that includes the current selected color.

The four-by-four matrix second from the left contains the sixteen most recently selected unique colors. Each time a new color is selected, if it is not already somewhere in this matrix, it is added as the top left color and all the other colors are shifted right, with the rightmost color on each row shifted down to the left end of the next row. The color on the bottom right - the oldest color - is pushed out of the matrix.

The leftmost matrix is a one column matrix of four rows. These colors never change. They are the Natural Color System (NCS) primary colors.

Color Harmonies
These are not active components. They are illustrations of the color harmonies that are provided in the button matrices. The "analogous" color harmony is not illustrated here. It is simply a group of colors that are close together in a sequence on the color wheel. Basic information on color harmonies can be found here, and for the color harmonies section of your advanced degree in Intergalactic Color Theory, go here.

Current Selected Color And Its Suggested Font Color
The current selected color and a font color to go with it are on the left hand side of the output table. The current selected color is on top and below it is the suggested font color. Both colors are represented by a color patch as well as in RGB, HTML, and CSS color encodings. The RGB encoding is the encoding that is used by Windows. It is displayed in both decimal and hex. The HTML encoding is a hex string in this format: #rrggbb. Click and paste into your HTML or CSS file. For CSS, the hsla and rgba encodings are present; just click and then paste them right into your CSS file.

The font color is chosen by an algorithm that picks a hue that compliments the current selected color and a saturation and luminosity that contrasts with it. This almost always works but there are some tricky colors where it does not work well. There is no algorithm that I am aware of that can always pick a good colored font for any arbitrary background color.

The font used to label the current selected color patch ("Current Color") is displayed in the suggested font color so you can see right away how well it works. The color used to label the suggested font color ("Font Color") is displayed in the current selected color.

Main Input Panel
This panel contains four different input points and a configuration point. The top box within the panel is the configuration point. Here, you can select the color representation (RGB, HSL, or HSV) and the number system (decimal or hexadecimal).

The next box in the panel is an input point -- the color representation components box. Here, you enter the individual component values for your color. For example, if you have chosen RGB in the configuration point above, you would enter the individual numbers for the red (R), the green (G), and the blue (B) component values of your color. Component values are relative to some scale so this is the place where the component scaling applies. Each component must fall within a specified range of zero to some integer. If you enter 128 as your red component, what does that mean? Is it 128 out of 255 or is it 128 out of 359, or 200, or 1000? For the computer to know how much red to include in the color, it must know the scale. It computes the percentage of red to apply from the component value and the scale as in 128/255 = 50%, meaning the red component of the color has to be turned up to the 50% level. There is a maximum value or scale for each color component in the current color representation.

The scale maximums can be changed at any time and all the numbers and calculations in the tool that depend on them will automatically change. The place to change the maximums is in the bottom partition of the blue component input box. Change the numbers there and then press the "Apply New Max Values" to cause the changes to go into effect.

The next input point is in the pink box, which is the third box down in the panel. It is for entering a color value encoded as an RGB number. Just paste or type the number in the box and press the "Apply Word" button.

The next input point is in the green box, which is the fourth box down in the panel. It is for entering a color value encoded as a HTML number. This number, like all other numbers can be either a decimal number or a hex number. Just paste or type the number in the box and press the "Apply Word" button.

In all cases, if there is a paste button next to the input point, clicking it will copy whatever is in the Windows clipboard into that input point.

Colored Cell Input Point
The bottom input point (the gray box) contains an Excel cell filled with a color. You can change the color by clicking inside the cell. This will launch Excel's color picker dialog. The color you pick in the dialog will be used to fill the cell and when you press the "Apply Color" button, it will become the current selected color. You can also use the paste button to change the color. If you have copied an RGB number or an HTML number into the Windows clipboard by clicking on one of those numbers inside this tool, or copying from somewhere else in Windows, or by picking a color with the eyedropper, then clicking the "Paste" button here will change the color in the cell.

Eyedropper Color Picker
An eydropper tool does not come with Excel and since there are many good ones available for free on the web, I did not code one for this tool. However, the tool integrates simply and seamlessly with any third party eydropper. If you do not already have a separate eyedropper tool on your computer, you can download one. The one I downloaded and installed is called "Color Cop" and it can be found here. It works well and has never caused any problems on my computer. I have also used "Instant Eyedropper" which can be found here. It is also very good, and has never caused me any problems. Both of these eyedroppers copy the value for the color you pick with them into the Windows clipboard, and from there, you can paste into this tool by pressing any of the paste buttons.

Installing Eyedropper Color Picker
Once you have an eyedropper tool installed, go to the tool's "config" tab. On any one of the empty lines in the "Parameter Name" column of the Parameters table, enter the words "Eye Dropper". On the same row, in the "Value" column, enter the path to the executable for your eyedropper tool. I left the entries corresponding to my installation in the Parameters table on the "config" tab in this file. You can just modify my path with yours. When this configuration activity is completed correctly, the eyedropper icon on the "colorTool" tab will launch your eyedropper tool and you can pick colors with it and paste them into the input points in this tool.

W3C CSS Color Table
I included the W3C CSS color table with names on a separate tab in this tool. It is convenient to have and can be used with the eyedropper very easily.