Colors and color schemes

Where are we?

You need to create the right look and feel for your Web site. You learned earlier that look and feel includes:

  • Page layout
  • Colors
  • Images
  • Typography
  • Effects

Let’s talk about color in this lesson. Both text and images have color. Text color is set with CSS. Image color is part of the images themselves. Choosing a set of colors that work well together is hard for, er, artistically challenged people like me.

This lesson’s goals

By the end of this lesson, 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:

Color schemes

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

CSS rules set colors for text. Colors in CSS are usually represented as three numbers: the amount of red, green, and blue (RGB) 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;

“Hexadecimal” is just another way of writing numbers. 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 lesson

This lesson 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 people work with color, they want to say things like “make that blue brighter,” or “let’s try a paler orange.” That’s the way we’re used to talking about color.

It’s hard to do those things with RGB codes. Here’s an orange, and its RGB code:

Orange

Figure 2. Orange

How would you change the RGB code to make it paler? I’ll wait.

Oooo oooo ooooooo, ooo oooo ooo ooooooo oo,
Oooo oooo ooooooo, ooo ooo ooo ooo.

Figured it out? No? Don’t worry, I can’t figure it out either. People just can’t work with RGB codes. It’s too hard to figure out how much red, green, and blue to add (or subtract) to make a color paler.

RGB is precise, and it works for computers, but not for people. Is there something we can use instead of RGB, that’s also precise, and that people can use?

HSV works. It stands for Hue, Saturation, and Value. There’s a number for each one. So there are three numbers, just like RGB, but they mean different things.

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:

Color wheel

Figure 3. 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.

Primary hues

Figure 4. Primary hues

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

Mixing hues

Figure 5. 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:

Secondary hue

Figure 6. 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.

Saturation and value

Figure 7. 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 7, 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.

Grays

Figure 8. Grays

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

Renata
Renata

Is there anything special about those numbers, 215, 175, 135, and so on?

Kieran
Kieran

No. I wrote a program to create the display in Figure 7. The program just happened to end up with those numbers, when it had made an image I liked.

Nothing special about the numbers, except for 255. That’s the maximum for a color. The minimum is 0. rgb(0, 0, 0) is black – no colors at all.

Let’s pick a row from Figure 7:

Value and hue constant

Figure 9. 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 7 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.

Tint and shade

Figure 10. 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 another person about color on a Web site? Have some charts like Figure 7 handy. Then you can say, “These are all reds, but different kinds of reds.”

More on this later.

Let me show why HSV is so handy. I wanted a buttony thing with a green background, and darker edges. This video shows how HSV and Paint.NET helped me do that.

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.

Color wheel

Figure 3 (again). Color wheel

The wheel shows different hues.

You can make color schemes based on the color wheel. Let’s talk about 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:

Color Scheme Designer

Figure 11. 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:

Monochrome site

Figure 12. Monochrome site

What a handsome fellow! Reminds me of someone.

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

Accent

Figure 13. Accent

If you need more than one accent color, consider making them tints and shades of the same hue. So if the accent is green, have a few different greens you can use as accents.

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

Blue monochrome

Figure 14. 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 14, you have to be more careful. Try using an accent hue that’s directly opposite on the color wheel:

Accent color for blue

Figure 15. Accent color for blue

This is exactly what’s happening in Figure 14.

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:

Accent color for bright, low saturation background

Figure 16. 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 Figure 14 is based on actually looks like this:

Accent objects

Figure 17. Accent objects

The yellow-orange color of the accent objects is complementary (that is, opposite on the color wheel) 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 use it as one of the main colors of the site. Then you get a complementary color scheme.

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

Some reds and greens are complementary:

Red and green

Figure 18. Red and green

Here’s a site that uses them:

Complementary scheme in action

Figure 19. 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.

Analogous scheme

Figure 20. 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.

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 employer might already have some standard colors. Look at the IBM site; 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.

DogOne tool is Whats its color. You can upload a photo, or enter the URL of one. Give it a try. Pick a photo, upload it, and see what colors are in it. Download the photo on the right if you don’t have one of your own handy.

If you have 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” suggest blues and greens in a analogous scheme. “Lively” and “fun” suggest something else.

Pick a few colors (including accent colors). Play with tints and shades. You won’t stay with them, 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.

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:

OSWD designs

Figure 21. 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 you figure out the colors being used. ColorZilla is an add-on for FireFox. When you install it, it adds an eyedropper to the Firefox status bar:

ColorZilla

Figure 22. ColorZilla

Click it to sample any color in the browser window.

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

Starting the color analyzer

Figure 23. Starting the color analyzer

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

The color analyzer in action

Figure 24. The color analyzer in action

Exercise: Get a page's color scheme

Find a Web page you like. Use ColorZilla to get the colors on the page (you’ll need to install ColorZilla in Firefox).

Create a Web page like this one, showing some of the main colors on the page. Show maybe five or six colors, or however many are needed to show the main colors on the page.

I took a screen shot of part of the page. If you don’t have a screen capture tool on your Windows computer yet, try PicPick and Gadwin PrintScreen. Mac users will have to find something else.

You can look at the HTML of my solution to see how to write your own page.

Upload your solution to your Web server. Put the URL below.

(Log in to enter your solution to this exercise.)

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?

Time to make a color scheme for your eMe site.


How to...

Lessons

User login

Log in problems? Try here


Dogs