Understanding Images: A Guide to Color Formats

Why does the color of your nonprofit's logo never look the same on the Web as it does in print? Is there a difference between CMYK and RGB? What does your printer mean when she talks about two-color versus four-color printing? And why on earth is your designer discussing "PMS" with you?

For something you learned about in kindergarten, color can seem like an awfully complex subject when it comes to print and Web design. Rather than a simple aesthetic decision, choosing the best color for a print or Web project often means matching the right color format to the right graphics software, and even (in the case of print design) to the right paper and printer.

Yet even if your nonprofit outsources all of its Web and print design projects, understanding your color options can help you better communicate with your designer and printer and save you time and money. More importantly, having a good grasp of color formats can help ensure that your Web site and printed materials — and by extension, your organization — look professional and polished.

Common Color Formats and Best Uses

Because onscreen color is generated differently than printed color, it's important to know which formats you should use for each. The overviews below can help you decide which color format suits your next design project.

Web Color

RGB

Computer monitors reproduce every color you see on your screen using a combination of red (R), green (G), and blue (B) light. R, G, and B each have 256 possible depths, making it possible for your computer to generate more than 16 million different possible RGB colors — though some older monitors or graphics cards may not be able to display the full range.

Each RGB color is defined using three numbers, also known as values: the first represents red, the second represents green, and the third represents blue. The values in each channel range from 0, the darkest shade, to 255, the brightest shade: While the deepest shade of black would have an RGB value of 0 0 0, white would have an RGB value of 255 255 255, bright red would be 255 0 0, and so on.

Most advanced image-editing applications — including Adobe Photoshop and The GIMP — provide a color picker tool, which allows you to choose an exact color from a palette while displaying its RGB values. You can also use the color picker to find RGB color values found in an image simply by clicking on different parts of the file.

It's worth noting that if your monitor has not been properly calibrated (that is to say, had its lighting adjusted), RGB colors may appear lighter or darker than they truly are. Although Photoshop users can calibrate their monitors using the built-in Adobe Gamma tool, organizations that lack Photoshop may want to download Monitor Calibration Wizard, a free program that walks you through the process of calibrating your display.

A visual representation of the RGB colors.
Copyright © Mike Horvath, Creative Commons Attribution-ShareAlike.

Best Uses: Images saved in RGB color format are best for when you want to add an image with a large range of detailed colors to your organization's Web site.

For instance, if you're posting a photograph to your organization's Web site, you are likely saving it as a JPEG, a file format that can theoretically display more than 16 million different distinct colors. (As mentioned earlier, the colors you see on your screen depend on the computer you're using to view the image.) To ensure your image can display the widest range of colors possible, save it in RGB mode. To ensure that the file is indeed RGB, browse your image-editing program's menu, find an item labeled Mode (or something similar), and select the RGB option.

For more information on different image formats and the number of colors they can display, read TechSoup's article Understanding Images: A Guide to File Formats.

Indexed Color

Like RGB, the indexed color format displays colors by combining red, green, and blue values. However, the indexed color format pulls all colors found in an image from a limited palette, which cannot exceed more than 256 different colors. Since certain types of image formats can only display up to 256 colors, saving them in RGB format is needlessly inefficient; the extra colors will not be displayed on a monitor, but the file size will be larger than that of an indexed color image.

Best Uses: Like images saved in RGB color format, images saved in the indexed color format are best used for online purposes. But because the indexed color format contains far fewer colors than the RGB model, it is most appropriate when saving images with a limited color range. Because of their fixed palette, indexed color images often take up less hard-drive space and will therefore load more quickly in a visitor's Web browser.

For example, if you're designing your nonprofit's three-color logo and plan to save it in the Graphics Interchange File (GIF) format, you will be required use an indexed color palette, as GIF can only display up to 256 colors. Note that while the GIF format requires the use of indexed color, several other common image formats allow you to choose between indexed and RGB formats.

Because many tools found in image-editing programs are unavailable in indexed color format, you should always work with images in RGB format before converting them to indexed format. To perform this conversion, look for a menu item in your image-editing program labeled Mode (or something similar), and select the indexed color option before saving the finalized file.

Print Color

Note: Because professional print shops can vary in terms of equipment and file requirements, you may want to contact the vendor before sending a print project, both for instructions on how to set up your files and to request an initial proof. Taking these precautions will help ensure that the final print run meets your expectations.

CMYK

Like computer monitors, professional print presses — along with office inkjet and laser printers — can blend just a few colors to create all the colors you see in a printed photograph or a magazine. In a process known as four-color printing, varying levels of Cyan (C, or blue), Magenta (M), Yellow (Y), and Black (K for key) inks are mixed to create the entire spectrum of colors.

The CMYK format describes colors using a combination of four numbers; these numbers indicate the percentage of cyan, magenta, yellow, and black that that color contains. The way the CMYK color percentages blend determines how the final printed color will appear. For a visual representation of CMYK colors and their corresponding percentages, check out December Communications' CMYK Color Codes.

A visual representation of the CMYK model.
Copyright © Mike Horvath, Creative Commons Attribution-ShareAlike.

Best Uses: CMYK is the print industry's standard color format, so if you're sending materials to a professional print shop or printing them in-house, you will probably have to convert your RGB or indexed color image to CMYK in order to achieve the best possible quality.

Though professional-grade image-editing applications such as Photoshop can handle this conversion for you, it's important to note that, because CMYK has a smaller color range than RGB, the application may not be able to make exact translations for every color. In such instances, the application will convert the RGB color in question to its closest CMYK match. In Photoshop, you can see the CMYK values of the RGB color that your cursor is hovering over in the upper-right corner of the application's window.

Before sending a converted CMYK image to a professional printer, you may want to compare it with the original RGB image and look for major color discrepancies. Some image-editing applications, including Photoshop, offer a tool that will automatically point out RGB colors that do not have exact CMYK matches. If you notice differences, you may wish to point them out to the print shop in your instructions.

Most nonprofits will find it easier to have the print press make any necessary color corrections, then request proofs — and possibly changes — to ensure that all the desired colors are accurately represented. However if your budget prevents this and the color corrections are minor, you may wish to experiment with fixing them yourself. Photoshop911.com's article Converting RGB to CMYK offers a couple of tips for correcting color in CMYK images.

It's also important to note that, even if you don't experience major color discrepancies during the conversion process, for a variety of reasons, the final CMYK image will look slightly different in print than it did on your monitor. If you want to see how the printed images will look, you may find it helpful to purchase a CMYK process color guide, a book that demonstrates how different CMYK colors appear in print. To get an idea of how the CMYK image on your screen might translate to print, you would check the CMYK values found in the book against the CMYK values calculated by your image-editing application.

Pantone

The Pantone Matching System (PMS) is a proprietary color format developed in 1963 by a New Jersey-based company to solve the color-matching problems of the graphic arts community. PMS contains more than 1,400 colors, commonly displayed in a cardboard or paper-based guide. Because the colors found in PMS are controlled by a central authority that specifies how the inks should be mixed, a Pantone color will theoretically always look exactly the same, regardless of which print press handles the job. (Note: Your office's ink jet or laser printer cannot print in Pantone colors.)

Most Pantone colors are identified by a unique number, which is followed by a letter. The letter identifies what type of paper the Pantone color is optimized for, as colors – regardless of whether they are Pantone or CMYK — look different depending on the paper on which they are printed. In PMS, C stands for coated paper, U stands for uncoated paper, and M stands for matte paper.

When you send a Pantone job to the print shop, you should specify exactly which colors you want by including their numbers and letter codes in your instructions. While the aforementioned Pantone guides provide a color's number and letter — as well as the most accurate representation of what a color will look like in print — you can also find this information in image-editing and graphic-design programs such as Photoshop, Adobe Illustrator, and Quark XPress.

Best Uses: Pantone colors are most appropriate when you need a very specific or metallic color that cannot be accurately reproduced using the four-color CMYK process. So, if the color of your nonprofit's logo doesn't look exactly right when printed in CMYK, you might want to consider finding a suitable Pantone color. This approach might also be beneficial if you don't always use the same print press, because, as previously mentioned, PMS is standardized.

Pantone colors can also be used as an alternative to CMYK if your print job contains only a couple of colors. In such cases, using two Pantone colors to produce an image known as a duotone may actually be a cheaper option than four-color CMYK printing. But since rates vary among print presses and according to the size of your print run, you may want to shop around to find the most cost-effective method for your project.

A Pantone color can also be added to a four-color job if you need a color that CMYK cannot accurately reproduce. However, because this process will require an extra run through the printing press, it will likely cost more than a CMYK-only job.

Web or Print Color

Grayscale

Simply put, grayscale format converts a photo or image to black and white by discarding all of the file's color information. Most image-editing applications include a tool that automatically converts a color photograph to grayscale, although once you remove an image's color and save the file, there is no way to restore it.

Note that using grayscale format is not the only way to convert a color image to black and white. If your image-editing program has a desaturation tool, you can use it to remove color from a file. For more information about the differences between grayscale conversion and desaturation, read About.com's article The Many Faces of Black and White. For yet another method of converting a color image to black and white, read this Photoshop911.com tutorial called Making Black/White in Photoshop.

Best Uses: Grayscale images can be used both on the Web and in print, though you may want to experiment with the other black-and-white conversion methods mentioned above to see which yields the best results for the image you're working with.

Keep in mind that some professional print shops may wish to perform the grayscale conversion themselves, so you may want to ask about this before you send a file that you've converted yourself. And if your printer does request that you send a grayscale image, make sure that the final file has actually been saved in grayscale format; if you have accidentally converted the file back to CMYK, the image may print out greenish rather than black and white. Also, many print shops may own a specialized printer optimized for black and white, making file conversions unnecessary.

Using the proper color format can help give your organization's Web graphics or printed materials an attractive, professional appearance, which can help you attract more supporters and members. Because like everyone else, nonprofits only get one chance to make a positive and lasting first impression.