Creating a Web Color Scheme

There are four basic color schemes that you can use for a Web site. Each page of this article shows a picture of the color scheme, and how you can generate a similar scheme in Photoshop.

• monochromatic
  Using colors of the same hue. They may have different tints or shades depending upon how much white or black is added.
• analogous
  This uses colors that are close to one another on the color wheel.
• complementary
  This is often seen as "opposite" because the two colors in a complementary color scheme are opposite one another on the color wheel.
• triadic
  These colors are evenly spaced on the color wheel.

All the color schemes will use this yellow as the base color.

This color scheme uses the mustardy yellow of my base color and adds some white and black to tint and shade the scheme accordingly.

• upper left - the base color #ffe500
• upper right - added a fill of 50% white to get #fff280
• lower left - added a fill of 75% white to get #fff8bf
• lower right - added a fill of 50% black to get #7f7200

Monochromatic color schemes are often the easiest on the eyes of all the color schemes. The gentle changes in tint and shade make the colors flow into one another better. Use this color scheme to make your site appear more fluid and collected.

Added a square of 20% black to get more colors in the scheme. Adding black or white to your colors can create a new color to your palette without messing the tone of the page.

This color scheme takes the yellow base color and adds and subtracts 30 degrees to the hue in the Photoshop color palette.

• upper left - the base color #ffe500
• upper right - +30 degrees to get #99ff00
• lower left - -30 degrees to get #ff6600
• lower right - 100% white #ffffff

Analogous colors can work very well together, but sometimes they can badly clash. Be sure to test these schemes with more people than yourself, your family and friends. When they work, they create a site that is more colorful than the monochromatic scheme, but nearly as fluid.

Added a square of 20% black to get more colors in the scheme.

Complementary color schemes, unlike other color schemes typically only have two colors. The base color and it's opposite on the color wheel. Photoshop makes it easy to get the complementary color - simply select the area of color that you want the complement of and hit Ctrl-I. Photoshop will invert it for you. Make sure to do this on a duplicate layer, so you don't lose your base color.

• left - the base color #ffe500
• right - the complement #001aff

Complementary color schemes are often a lot more striking than other color schemes, so use them with care. They are most often used on pieces that need to stand out.

To get this version, I added 50% white to the bottom half of the colors and 30% black to the center square. As you can see, it gives you a few more options but it's still a complementary color scheme.

Triadic color schemes are made up of 3 colors more or less equally spaced around the color wheel. Because a color wheel is 360 degrees, I again used the hue box in the color picker to add and subtract 120 degrees from the base color.

• upper left - the base color #ffe500
• upper right - +120 degrees to get #e500ff
• lower left - -120 degrees to get #00ffe6
• lower right - 100% white #ffffff

Triadic color schemes often produce very vibrant Web pages. But like complementary color schemes, they can affect people differently. Be sure to test.

You can also create tetradic or 4-color color schemes, where the colors are equally spaced around the color wheel.

As with the other examples, I added a 30% black square to the colors to get the additional shades.

Beauty is in the eye of the beholder, but it is an unfortunate fact that not all colors go together. Discordant colors are colors that are farther than around 30 degrees apart on the color wheel and are not complementary or part of a triad.

Discordant color schemes can be very shocking and should only used to generate attention. Remember that because these colors will often clash, the attention you get may not be exactly what you're looking for.