Color and Web Design

This chapter introduces the basics of color theory, choosing color schemes that work, and good practice when dealing with color on the Web.

 

 

This sample is taken from Chapter 2: "Colors" of the Glasshaus Title "Web Graphics for Non-Designers"

Complementary

Selecting colors opposite each other on the color wheel creates a scheme of complementary colors. The opposite of the primary blue, as per the diagram below, is orange. For purple, the complementary is yellow, and so on. In each of the swatches below, the two tones on the left complement the two on the right.

Complementary swatches:

Once you have mastered selecting complementary colors, it may be time to experiment with the double complement, that is, choosing two sets of complementary colors. Alternatively, consider the split complement that chooses a hue and two colors adjacent to its alternate. The diagram below shows an example of color positioning for a double complement (left) and split complement (right) on a color wheel:

Remember that simplicity is one of the key components of successful web design. There is nothing to be ashamed about using a scheme in which you have confidence, rather than striking out into fresh color ground simply for the sake of it.

Screenshot:

fusion.com.au

Fusion are new media developers. Their site presents a bold and confident appearance with a striking complementary combination.

Complementary color schemes can give sites a vibrant feel. Sites designed to appeal to children often use these themes to appear exciting and dynamic. Such choices also appeal to parents buying for their children, who understand that a lively environment can be a positive influence on a growing mind. A complementary scheme commonly used is the red and green combination invoked by retailers during the Christmas season. You should be conscious, though, of the way in which complementary colors can behave near each other. Color behavior is discussed at a later point in this chapter.

These combinations can also present a subdued feel if de-saturated hues are used. Also, be aware that the screen space devoted to your main colors can substantially alter your final effect. As an example, a page that is almost entirely monochromatic, but with a slight addition of titles or features in a bright complement can create a punchy effect without looking like it is an entertainment site for children.

Triadic

The triad approach to selecting colors involves picking from the points of an equilateral triangle within a color wheel. That is, choosing three colors that are equidistant from each other. In Photoshop, choosing triadic associates for your base color is as easy as adding or subtracting 120° from the hue value. For example, a red with hue angle of 0° should be accompanied by a green of 120° and a blue of 240°.

Triadic swatches:

 

For the advanced, an alternate complement is a four-hue scheme that adds a complement of one hue to a triad. Another four-hue scheme is the tetrad four colors selected from the points of a square within a color wheel. Both are shown in the diagram below.

Alternate complement

Tetrad


 

Screenshot:

adelaide36ers.com

The Adelaide 36ers use the bold primary colors of blue, red, and yellow, drawing directly from corporate colors.

Sites employing the contrasting colors of triadic schemes still retain some sense of harmony, while bringing a lively feel to an online presence. If you are looking for a unique theme to create a stir for the site of an illustrator, a satirical magazine, or a quirky band, then one of these color sets is definitely worth a try. Also try de-saturating colors somewhat to maintain a unique look, but with a more restrained effect.

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. The most popular for its over high-quality Dreamweaver extensions and templates.

George is also the founder of Wappler.io - the most Advanced Web & App Builder

See All Postings From George Petrov >>

Comments

Great Tutorial!

December 5, 2002 by Cecilia Martinez

I want to add it to my favorites but I can't find a way to do it!

Thanks!

Cecilia

RE: Great Tutorial!

December 5, 2002 by George Petrov
Just click on the Favorites icon - that is right of the title

RE: RE: Great Tutorial!

December 6, 2002 by Cecilia Martinez
Thanks George! I figured it out once I sent the message  :-)

Great Tutorial

December 7, 2002 by Jeremy Conn
Awesome tutorial... very nice to see a focus on how traditional design skills need to stay important regardless of the medium. Well thought out and arranged.
See all 11 Comments

You must me logged in to write a comment.