Creating a Web Color Scheme

Abstract red orange polygonal vector background

 

MimaCZ/Getty Images

There are four basic color schemes that you can use for a website. 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.

01
of 09

Monochromatic Web Color Scheme

Monochromatic Web Color Scheme

J Kyrnin

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.

02
of 09

More Monochromatic Web Color Scheme

Monochromatic Web Color Scheme

J Kyrnin

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.

03
of 09

Analogous Web Color Scheme

Analogous Web Color Scheme

J Kyrnin

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.

04
of 09

More Analogous Web Color Scheme

Analogous Web Color Scheme

J Kyrnin

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

05
of 09

Complementary Web Color Scheme

Complementary Web Color Scheme

J Kyrnin

Complementary color schemes, unlike other color schemes typically only have two colors. The base color and its 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.

06
of 09

More Complementary Web Color Scheme

Complementary Web Color Scheme

J Kyrnin

To get this version, we 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.

07
of 09

Triadic Web Color Scheme

Triadic Web Color Scheme

J Kyrnin

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

08
of 09

More Triadic Web Color Scheme

Triadic Web Color Scheme

J Kyrnin

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

09
of 09

Discordant Web Color Schemes

Discordant Web Color Schemes

J Kyrnin

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 be 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.