What the Hex?!
How to Match Documents to the Colors of Your Company's Web Site
By Carolyn Hasenfratz, Creative Director, Webinar Resources

Have you been called upon to create a document for your company? One of your goals is to make your document match the look and feel of your company's other materials, in order to reinforce your brand and create a polished and professional image for the customer. One way to achieve that is to match the colors in your document to those on your company's web site, the central hub of all of your marketing activities.

In whatever software you are using to create your document, for example Microsoft PowerPoint or Word, a palette of colors is already available. You might see some colors that are close, but maybe they don't look quite right. How do you get the colors to match exactly?

The easiest way is to ask whoever designed the site to send you the RGB numbers for the colors used on the web site. RGB stands for Red-Green-Blue, which are the three primary colors when the colors are made of light, such as on a TV screen or a computer screen.

Once you get the numbers, what do you do with them? Let's use Microsoft PowerPoint for a demonstration. I'll pretend I want to use RGB 131-161-214 as a fill color.

1. Select the fill tool , and from the pop-up menu, select "More Fill Colors..."
2. Click the custom tab, then enter the RGB numbers into the boxes.
3. Click OK, and the new color is now available to all the tools that use colors.

There might be times that the designer is not available to be asked for this information. Chances are, if you have and use professional graphics software such as Adobe Photoshop or Adobe Illustrator, you don't need my help to find out the colors. But every person who is called upon to make a PowerPoint or Word Document does not necessarily have these tools available. What then?

If you are a Windows user, you have a program called Paint which is in the Accessories program group. You can use it to obtain the RGB numbers for a color. Here is how:

1. In a web browser, right click (or Alt click) somewhere on your web site, on top of an image that has a color that you want. Save the image to your hard drive.
2. Open the image in Paint.
3. Select the Pick Color tool, which looks like an eyedropper, and click on the color in the graphic that you want. In this example I'm going for the hot pink. The color will appear at the left of the color palette on the bottom toolbar.



4. At the top, select "Colors", then "Edit Colors...", then "Define Custom Colors". The RGB values will be at the right. Write them down, and repeat the process until you have all the colors you want.

It's possible that there are more colors embedded in the actual code of your web site. Here is how to find those:

1. In a web browser, right (or Alt)-click on a blank portion of your web site, where there is no text or graphics present, and select "View Source". You should see the code in a text editor.
2. Search for the symbol "#", (Ctrl+F) and wherever you see that symbol followed by six numbers or letters or a letter/number combination, write them down - unless they are "#FFFFFF" or "#000000", you can ignore those - they are the codes for white and black.
3. Does your site use style sheets? Look for the path toward the top of the page. It will look something like the line highlighted in the previous graphic.
4. Follow the path to the style sheet, open it in a text editor, and search it for colors as well.

Now you have a nice list of pre-selected coordinating designer colors - but these groups of numbers and letters look different than the RGB numbers, don't they? That's because they are in hexidecimal format, and they will need to be converted to "normal" numbers for the RGB values. Luckily, this is not only easy to do, but if you are a Windows user, the tool to do it is included in your Accessories.

I will demonstrate how to turn the hexidecimal number "1A1866" into RGB values.

1. Go to the Accessories program group and open the calculator.
2. Under "View", select "Scientific".
3. Select the radio button next to "Hex".
4. The first two characters of our color, "1A", are the Red value. Enter "1A" into the calculator, then click the "Dec" radio button. You now know the Red or R value is "26".
5. Click the "C" for clear button, re-select the "Hex" radio button, and you are ready for the next pair of characters. Repeat until you have the whole RGB value - in this case 26-24-102 - which turns out to be a dark blue-purple.

Now that you have a coordinating palette of colors to work with, it will be much easier to present a coherent and professional image to your customers through all channels of visual communication.