Choosing a color scheme (continued) - Part 2 of Chapter 2 from Web Graphics for Non-Designers (3/4) | WebReference

Choosing a color scheme (continued) - Part 2 of Chapter 2 from Web Graphics for Non-Designers (3/4)

To page 1To page 2current pageTo page 4
[previous] [next]

Web Graphics for Non-Designers, Chapter 2: Using Color

Sourcing Colors

The identity design firm contracted to create the style guide for your company or client has generally defined the corporate colors. If no one has them noted somewhere convenient, you should contact the designers. More often than not, these colors will be provided as Pantone values.

Pantone color numbers are a proprietary system created to guarantee accurate representation of color in printed materials. They are an essential part of life in a professional design company, but are of somewhat less use online, where differences in monitor quality, gamma correction, viewing conditions, video hardware, and user preferences combine to make the Web the occasionally impossible place we know and love. Nevertheless, where budget (and patience!) permits, kicking off with the correct Pantone colors is a good move.

The values you are given may correspond to any number of standards, so you might need extra information, but the more popular of those available is generally Pantone Uncoated.

To translate your Pantone colors to your RGB working space in Photoshop, you will need to open the color picker, select the custom button at the right-hand side, and then confirm that your color standard is selected in the Book drop-down box. Then enter the color digits and allow the dialog to auto-select your color, before choosing to return to the Picker. This will give you your RGB triplet and, in more recent versions of Photoshop, the color in hexadecimal format. This screenshot shows the Custom Colors dialog box.

Photoshop's Custom Colors Dialog Box

Photoshop's Eyedropper Tool

In the case of designers having disappeared and Pantone values being unavailable, color picking from a digital file, such as an EPS (Encapsulated PostScript file), is your next option. All quality graphics applications have a tool (the eyedropper in Photoshop, for example, highlighted in the image at the left) that allows "sampling" of the color value at any given pixel.

Logo: Marks and Logotypes

Unfortunately, it is not uncommon to encounter genuine lost artwork or client apathy and be forced to work from nothing but a printed logo (such as a letterhead). If faced with this scenario, you should aim for a "best guess" by comparing your printed source and an on-screen color picker until satisfied with your selection. This, however, is an absolutely final alternative. Do not forget to consider calibrating your monitor to use a gamma correction similar to that likely to be used by a majority of your eventual audience. Gamma correction is discussed briefly at a later stage of this chapter.

Given an undefined corporate color or set of colors, adapting a scheme from a logo is a sensible second priority and can be built upon using the methods outlined previously. When caught with a disassociated scheme within a brand, perhaps selected by misguided designers, all hope is not lost. A resourceful developer will choose and emphasize one hue. Techniques to prevent the inharmonious colors remaining in your logo from affecting your scheme are discussed later in this chapter. After selecting one hue and treating it as a base element, choosing either a complementary or analogous support cast is straightforward.

To page 1To page 2current pageTo page 4
[previous] [next]

Created: December 9, 2002
Revised: December 9, 2002