Color and Web Design

A Starting Place for Your Scheme

A color scheme is often anchored to a seldom-altered brand. Consider a few of the more memorable color choices and schemes on the Web today, and you'll find that while some of the sites have undergone substantial redesigns, very few have deviated from the colors that their audience has come to recognize.

When creating a design for a client large enough to have an established brand, existing components should be considered first.

Corporate Colors

The first priority in the majority of color decisions should be consideration of current corporate colors. Opting for colors complementary or analogous to those within the corporate scheme ensures an eye-pleasing result.

A broad range of colors can accompany a single corporate hue, whether analogous, complementary, monochromatic, or triadic in relation. Your exact choice should depend on the industry, positioning, and goals of the site in development. Basing a color scheme on the familiar blue of the IBM logo (pictured below) could potentially take one of the four paths shown here:

If the identity colors are analogous, it is easy to extend the scheme to a third color adjacent on the color wheel. Similarly in the event of two colors having the same source hue, selecting a third shade or tint to form a monochromatic association is easy.

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 colorpicker, 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 CustomColors dialog box.