The color wheel is the most basic, yet important, tool for creating color schemes. The color wheel shows the relationship of colors. There are three primary colors (red, blue, yellow), three secondary colors which are the result of mixing primary colors (purple, orange, green) and the tertiary colors which are a primary color mixed with a secondary color such as red-orange, yellow-green and blue-violet. When these colors are mixed with white or black it creates numerous different tints and shades.
Monochromatic
Monochromatic color schemes are made up of different tones, shades and tints within a specific hue. These are the simplest color schemes to create, as they are all taken from the same hue, making it harder to create a jarring or ugly scheme (though both are still possible).
Monochromatic Website Scheme:
Analogous
Analogous color schemes are the next easiest to create. Using three colors (hues) that are neighboring each other on a 12-spoke color wheel these schemes can be warm (red, orange, yellow) or cool (green, blue, violet, purple) since the colors are adjacent on the color wheel. By using tones, shades, and tints we can add interest to these schemes and adapt them to our needs for designing websites.
Traditional Analogous Color Scheme:
Analogous Color Scheme Adapted for Websites:
Complementary
Using two colors (hues) that are opposite each other on the color wheel, such as red and green or violet and yellow, choose varying tints, tones, and shades, which will give a bold dramatic effect and insure legibility. In their most basic form, these schemes consist of only two colors, but can easily be expanded using tones, tints, and shades. A word of warning, though: using colors that are exact opposites with the same value right next to each other can be unsettling visually and may appear to actually vibrate along their border. Avoid this either by leaving white space between them or by adding another, transitional color between them.
Complementary Website Scheme:
Split Complementary
Split complementary schemes are almost as easy as the complementary scheme. In this scheme, instead of using colors that are opposites, you use colors on either side of the hue opposite your base hue.
Split Complementary Website Scheme:
Triadic
Using three colors (hues) that are equal distance apart on the 12-spoke color wheel, such as red, yellow and blue or using secondary colors yellow-green, blue-violet, and red-orange, this is one of the more diverse color schemes.
Triadic Website Scheme:
Double-Complementary (Tetradic) Tetradic color schemes are probably the most difficult schemes to pull off effectively. The best way to use a scheme like this is to use one color as the primary color in a design and the others just as accents. Tetradic color schemes can work well for creating color schemes with similar values. Just add a neutral (such as dark gray or black) for text and accents. It works just as well for darker color schemes.
Tetradic Scheme Adapted for Websites:
Custom
Custom color schemes are the hardest to create. Instead of following the predefined color schemes discussed above, a custom scheme isn’t based on any formal rules. Keep in mind the rule of contrast for web design: Use at least one dark color, one medium dark color, one medium color, one medium light color, and one light color.
Custom Scheme:
How to Apply it to a Website
For the most part with these schemes, the first color (if we look at this from left to right) would likely be used for headlines. The second color would be used for body text or possibly the background. The third color would likely be used for the background (or body text if color #2 was used as the background). And the last two colors would be used as accents or within graphics.
Conclusion
Final Result: Website Color Layout using Custom Scheme:
