Where are we?

You need to create the right look and feel for your Web site. You learned about typography. Now let’s talk about color.

These ideas apply to both text and images. Text color is set with CSS. Image color is part of the images themselves.

This page’s goals

By the end of this page, you should:

• Know what a color scheme is.

• Know how to describe individual colors.

• Know about different types of color schemes, like monochrome and analogous.

• Be able to decide what you want from a color scheme.

• Be able to extract a color scheme from a photograph.

The goal: A color scheme

Our goal is to create a color scheme for a Web site. A scheme is a set of a few colors. It’s often called a palette.

Here are some samples:

Figure 1. Color schemes

These color schemes are from Colors on the Web, a site that has schemes, a color wheel, a contrast analyzer, and other things.

We want a scheme that is usable and aesthetically pleasing.

• Usable – can the visitor read the content comfortably?

• Aesthetics – do the colors invoke the right mood?

Colors in CSS

This page is not about CSS. It’s about color. But eventually, you’ll need to make your color choices into something you can use in CSS.

Recall that colors in CSS are usually represented as three numbers: the amount of red, green, and blue that make up a color. Each number is from 0 to 255. You can set colors using the three numbers, like this:

color: rgb(128, 0, 0);

Or you can use a hexadecimal value:

color: #800000;

rgb(128, 0, 0) and #800000 are different ways of saying the same thing. Use whichever is more convenient. For example, the schemes from Colors on the Web in Figure 1 give you hexadecimal numbers. To use one of them, copy-and-paste the hexadecimal numbers.

The rest of the page

This page will help you create a GECS, a Good Enough Color Scheme. It may not win any art awards, but it won’t embarrass you, either.

Before I show you how to make a GECS, we need to have some good words for talking about colors. RGB codes are fine for computers, but that’s not the way people think about about color.

Let’s start by finding good ways to talk about:

• Individual colors

• Relationships between colors

Describing individual colors

When you’re working with a client on a Web site’s colors, talking about RGB codes won’t get you very far. But you can use words like “intense blue,” “bright green,” and “washed out orange.” Let’s see if we can come up with some ways of talking about colors that are precise, but also make sense to regular people.

HSV is an alternative to RGB. As in RGB, a color is specified by three numbers. But the numbers mean different things. They mean Hue, Saturation, and Value.

Hue is what we normally mean by “color.” Red, green, orange, violet, ... they are hues. The color wheel captures them. Here is a color wheel:

Figure 2. Color wheel

There are many different kinds of color wheels. This one is the color wheel that GIMP uses. The primary hues – red, green, and blue – are as far apart as they can get on the wheel.

Figure 3. Primary hues

As you move around the wheel, from one primary hue to another, you start mixing hues:

Figure 4. Mixing hues

When you have an equal amount of two primary hues, you get a secondary hue, like yellow, that looks entirely different from both of the primaries:

Figure 5. Secondary hue

So the first part of an HSV color is the hue.

You may say to yourself, “Self, there are lots of colors missing. Where’s the dark green of the leaves on my favorite tree?” Your self is right. Give he/she/it a cookie.

This is where the other two parts of HSV – saturation and value – come in. Saturation is the intensity of a color. Value is how bright the color is.

I had a hard time figuring out what saturation and value actually meant until I saw a chart like this one.

Figure 6. Saturation and value

This shows the pure red hue with different amounts of saturation and value. The color that is the most red (in the upper right) has high saturation and value. A pastel red (that is, pink) has low saturation, but high value – low intensity, high brightness. Dark red (looks like brown) has medium intensity and value.

If you have a good natural sense of color, your probably understand what saturation and value are by now. If you grok (“get it”), you can skip down a few paragraphs to the tints and shades section.

But I have to admit, I don’t have a natural sense of color. I needed to do some more thinking before I figured out HSV.

Here’s the way I think of it. The column on the left gives you a base amount of brightness to work with. For the grays in the left column of Figure 6, the amount of red, green, and blue is all the same. That’s what makes gray. The more of each color there is, the brighter the gray gets.

Figure 7. Grays

You get to white when red, green, and blue reach 255, their maximum value.

Let’s pick a row from Figure 6:

Figure 8. Value and hue constant

The value is all the same in the row. The colors are equally bright. As we increase the red saturation, the ratio of the amount of red to the amount of green and blue gets bigger and bigger. But the colors remain dull, because they all have the same brightness.

Tints and shades

The colors on Figure 6 are all tints and shades of red. You get a tint of a color if you add white to it. You get a shade of a color if you add black to it.

Figure 9. Tint and shade

The bottom line

For me, color is hard to think about. Maybe my brain is just not wired that way. But I know people who have no trouble with it.

What to do when you’re talking to, say, a client about color? Have some charts like Figure 6 handy. Then you can say, “These are all reds, but different kinds of reds.”

More on this later.

Describing the relationships between colors

We can describe a color by talking about its hue (base color), saturation (intensity), and value (brightness). But that’s only half the story.

A color scheme is not just one color. It’s a bunch of colors that work together to create an overall effect. We need a way to talk about collections of colors.

We’ll describe color schemes by how they use the color wheel. You saw a color wheel earlier.

Figure 2 (again). Color wheel

The wheel shows different hues.

You can make color schemes based on the color wheel. I’ll talk about few different types of color schemes.

Monochrome with accent color

A monochrome scheme is a set of tints and shades of one hue. Recall that a tint is a hue (like red) mixed with white. A shade is a hue mixed with black.

Monochrome schemes don’t have to be black-and-white (although they can be). Here is a monochrome scheme from Color Scheme Designer:

Figure 10. Monochrome scheme

The base color is in the middle. Tints and shades surround it.

Usually a monochrome color scheme by itself is not enough for the Web. You’ll need an accent hue, used to highlight things you want to draw people’s attention to. Like a special offer. Use accents sparingly.

Here’s a black-and-white monochrome scheme, from Khoi Vinh’s Web site:

Figure 11. Monochrome site

What a handsome fellow! Reminds me of someone. Hmm…

When you put the mouse cursor on an article name, you see an accent color:

Figure 12. Accent

If you need more than one accent color, consider making them tints and shades of the same hue.

Here is a monochrome design based on blue, with an orange accent:

Figure 13. Blue monochrome

I cheated a bit on this one. The actual design has some fish and things, to punch it up a bit. You’ll see that later.

Since black, white, and gray are neutral, any hue will stand out, and can be an accent color. But when a monochrome scheme uses a different base color, like the blue in Figure 13, you have to be more careful. Try using an accent hue that’s directly opposite on the color wheel:

Figure 14. Accent color for blue

This is exactly what’s happening in Figure 13.

Two hues are complementary if they are directly opposite each other on the color wheel. They have high color contrast.

If you use a bright, low saturation color for a background, most dark colors can be accents, even if they are not complementary. Here’s an example from Winnie Lim’s site:

Figure 15. Accent color for bright, low saturation background

Most of the page uses shades and tints of brown. The dark red makes a nice accent. It’s not opposite brown on the color wheel, but it looks OK because the background is pastel (bright, with low saturation).

Notice the picture of the dogs. It uses different colors entirely, and adds visual punch to the page. This is an accent object, something that stands out.

Here’s another example of fishy accent objects. The page in Figure 13 actually looks like this:

Figure 16. Accent objects

The yellow-orange color of the accent objects is complementary to the basic blue of the site. The fish automatically draw the viewer’s attention.

Complementary color schemes

We just saw a monochrome scheme with an accent color. The accent color might be the complement of the base color, that is, opposite on the color wheel.

Suppose you use the opposite color not just to accent the occasional element. You can use it as one of the main colors on the site. Then you get a complementary color scheme.

Complementary schemes creates a high-energy, vibrant look. They feel different from monochrome schemes, which are more plain.

Some reds and greens are complementary:

Figure 17. Red and green

Here’s a site that uses them:

Figure 18. Complementary scheme in action

This page uses tints and shades of green and red.

Analogous with an accent hue

Analogous schemes use colors that are close to each other on the color wheel. They are more peaceful, less jarring than complementary schemes.

Here’s an example from Arcion, a company that, among other things, sells complete Web site templates.

Figure 19. Analogous scheme

As before, you can use a color from the opposite side of the color wheel as an accent hue. Tints and shades of red might work well.

Other schemes

There are triadic, rectangle, square, and other schemes. The names are based on how the schemes use the color wheel.

We’ll just stick with the three we have:

• Monochrome

• Complementary

• Analogous

TigerColor’s color harmony page explores other types of schemes.

Creating a GECS

As you can see, color is a complicated topic. So what do you actually do in a real Web project?

This section explains how you can make a GECS. GECS stands for Good Enough Color Scheme.

The general approach is to:

• Understand what you want.

• Use something that somebody else has created.

You could just use somebody else’s color scheme, or you could use a complete design that has the colors you want.

Of course, don’t go stealing things willy nilly. Use color schemes and designs that you have permission to use. Use things that are free, or buy the right to use them.

Let’s start with the first step.

Know what you want

Often, you aren’t entirely free to choose colors. Your client or employer might already have some standard colors. For example, IBM isn’t called Big Blue for nothing.

If there isn’t a standard color set, there may be a logo that you must use. There might also be product photos or other graphic objects that you must include.

If you have to match a photo’s colors, there are tools that can help. They will analyze a photo, and create a color scheme based on it. You can use the scheme directly, or modify it to meet your needs.

One tool is Whats its color. You can upload a photo, or enter the URL of one. Give it a try.

If your client has any of these things (standard colors, a color logo, product photos, etc.), these colors are the beginning of your color scheme.

Now list some words to describe the mood you want from the site. “Serene” and “peaceful” might suggest blues and greens in a analogous scheme. “Lively” and “fun” suggest something else.

Now pick a few colors (including accent colors). Play with tints and shades. You won’t stay with these, necessarily. They’re a starting point.

There are many fun tools to play with. Sharebrain has a nice list of color tools. Check it out.

The goal here is not to settle on a color scheme, but to understand what you want. If you don’t know what you’re looking for, how are you going to choose the right thing?

So look at the logos, think about the site’s mood, and play around for a while. Then, when you see something that fits, you’ll recognize it.

Look at color schemes

Now take a look at some color schemes that other people have created. There are three options here:

• Look at color schemes only

• Look at complete designs

• Sample existing pages and images

There are many color scheme galleries. I mentioned Colors on the Web earlier. Color Schemer is another one.

Another good option is to look at complete designs, that include colors and graphics. One of my favorite sources is Open Source Web Design. Here are some of their offerings:

Figure 20. OSWD designs

It helps to know roughly what you’re looking for before looking at a design gallery.

A third choice is to base your colors on something that already exists, either a Web site or an image. There are tools that will help.

ColorZilla is an add-on for FireFox. When you install it, it adds an eyedropper to the Firefox status bar:

Figure 21. ColorZilla

Click it to sample any color in the browser window.

The real fun starts when you right-click, and start the color analyzer.

Figure 22. Starting the color analyzer

ColorZilla will analyze the page, and give you the color scheme:

Figure 23. The color analyzer in action

Choose a scheme

You have thought about what you want, played around with some color schemes, and looked at some alternatives. Choose the scheme you will use. If you’re creating a site for someone else, ask them to approve your choice before you invest too much time in graphics and such.

Summary

• You want to choose a color scheme, a set of colors that work together.

• Individual colors have a hue (basic color), saturation (intensity), and value (brightness).

• A tint is a color with white added to it. A shade is a color with black added to it.

• Types of color schemes include monochrome with an accent color, complementary, and analogous with an accent color.

• You need to understand what you want before choosing a color scheme.

• You can download complete designs, that include colors and graphics.

• You can generate a color scheme from a photo.

What now?

Let’s move on to learn a few more details about graphics.