Designing your site
Creating a color system
Designing for the web means you're not just choosing colors, you're creating a color system. Your hues have to work together to help the user understand your brand and your site.
"Designing for the web is more complex than print," says designer Jim Frew. "Color isn't just color—it's color systems. Once you have your corporate ID colors chosen, you need to think about colors for your navigation system."
You have to choose a color for your links—and perhaps different colors for followed links and "active" links (the color links turn at the moment the user clicks them).
Visitors will take cues about what to do based on your links and other elements on the page. So you have to think through the "action-related color implications," Frew says. "Certain colors have action-related associations: Green means go, red means stop, blue means a link, and purple is recognized as a visited-link color."
Your color system should include
Brand colors. These are the colors you've chosen to represent your brand. They'll often include 1–3 complementary hues, which probably appear in your logo and may or may not be integrated throughout the rest of your site.
Background color. The site's background is frequently left white—particularly on commerce sites, where product pictures must blend into the page. But colored backgrounds are common on other kinds of sites, and they play a major role in the emotional impact of your site.
Text. Most sites leave their text a basic black. But you can change it up a little, so long as you choose colors with sufficient contrast to be read. Headline colors. Will they be the same as the text or a different shade?
Link colors. You'll need a color for regular links (which will be blue, unless you specify something different). But you'll probably want to choose a visited-link (vlink) color and an active-link (alink) color as well. "Your link, alink, and vlink all need to play nicely together," says Jim Frew. "The link should pop forward, and the followed link should sit back."
Section navigation colors (optional). You may choose to color-code your sections, which adds another layer of complexity to the design. "If you really want to make it hard on yourself, you'll have a color-based organization to your site—where section a is blue, section b is green, section c is pink, section d is lime," says Jim Frew. Note, however, that it's not wise to rely on color for site navigation. Users tend not to notice it.
RGB vs. CMYK color
Colors are created differently on screen than they are for print. So every color can be described two ways: Its CMYK value describes how it's created for print, and its RGB value describes how it's created for the screen.
CMYK stands for Cyan Magenta Yellow blacK—the colors that are added to the printed page to produce a full range of colors.
RGB stands for Red Green Blue—the colors that are removed from light-based media (like computer screens) to create a full range of colors.