Pick a color, any color

Setting colors on websites is an inexact science. While color values can be set with precision, everyone’s monitor displays them differently. Nonetheless, it’s useful for website owners to know how colors are specified and how to determine exactly which color is being used at any location on a web page.

There are a few different ways of specifying color on a web page but by far the most commonly used is hexadecimal notation, also known as hex. It’s a quaint throwback to computer programming, in that it’s a numbering system in base 16. To count in base 16, we use the numbers 0-9 and letters A-F. Here’s how it works for colors:

• Hex colors are grouped into 3 pairs of two characters (1 byte) each.
• Each pair represents a value of 0-256 in base 16. The lowest value (0) is 00 and the highest (256) is FF.
• The first pair is the value of red, the second pair green and the the third pair blue.

For example, pure red is FF0000. The (first) red pair are the highest possible value and the other two pairs are the lowest. Similarly, pure green is 00FF00 and pure blue 0000FF. The number of possible color combinations is 16^3 or 16,777,216. And by the way, in many programming languages, hex colors are preceded by a hash (#) symbol.

Now that you know how colors are specified, how do you pick one? Using a “color picker” tool, you can easily capture the hex value of any color on your screen. Graphics programs like Photoshop have a color picker tool built in and there are a couple of different ways of picking colors out of the Chrome web browser. I have used an extension called ColorPick Eyedropper, that puts an icon in the toolbar. However, it’s a little bit flakey at times. A more reliable method is to use Chrome’s built in Inspect tool. Here’s how to use it:

• Right-click on any web page and select “Inspect” from the menu. By default, the Inspect window opens at the bottom of the browser. It can also be moved to the left, right or detached from the main browser altogether (which is how I like to use it).
• In the left pane, select a page element likely to have a color assigned in CSS (body is a good choice).
• In the right pane, click the small colored square in the CSS styles. In the tool that pops up, click the eyedropper icon.
• Click anywhere on the page to select the color under the cursor. This color will be shown in the tool in the Inspect pane, along with its hex value.
• If desired, click on the colored circle to copy the hex value to your computer’s clipboard.
• Note: any color changes shown on the page are temporary. Reload the page to revert everything back to the original colors.

Using these tools you can make sure that colors are consistent across all parts of your website. You can also work with your designer using a common language, eliminating any possible confusion over color shades.

Until next week.