Creating a Web Color Scheme

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

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.

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.

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