spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / authoring / graphics / color / nondesigners / chap2 / 1 To page 1To page 2To page 3To page 4current pageTo page 6
[previous] [next]

Web Graphics for Non-Designers, Chapter 2: Using Color

Lotus Notes Developer
AMS Staffing Solutions
US-IL-Glenview

Justtechjobs.com Post A Job | Post A Resume
Developer News
Facebook Wants to Power Web-Wide Apps
OpenSolaris to Support Facebook, OpenSocial
Sun Takes a Shine to Linux in New Web Stack

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 colors

Complementary swatches:

Complementary Color Swatch Example

Complementary Color Swatch Example

Complementary Color Swatch Example

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:

Double Complement Example

Split Complement Example

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.

Example: fusion.com.au

Screenshot:

fusion.com.au

Complementary Color Swatch Example

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.


home / authoring / graphics / color / nondesigners / chap2 / 1 To page 1To page 2To page 3To page 4current pageTo page 6
[previous] [next]



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

webref The latest from WebReference.com Browse >
Simple Comments Release Notes: v.960 · Adding Client Capabilities to Server Controls Using the ASP.NET AJAX Control Toolkit · How to Create an Ajax Autocomplete Text Field: Part 10
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
The NZXT Guardian 921 Gaming Chassis Offers Top Features and a Low Price · Beyond Simple File Sharing: Using Mapped Drives · RedAntenna's Widget and Marketing Helps Artists Sell Online

Created: December 2, 2002
Revised: December 2, 2002

URL: http://webreference.com/authoring/languages/html/definitive/1/5.html