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 4To page 5current page
[previous]

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

Web Developer
Bible League
US-IL-Crete

Justtechjobs.com Post A Job | Post A Resume
PDAs
PC Notebooks
Printers
Monitors
Developer News
Linux 2.6.26 Opens Up to Debugging
Borland Launches ALM Management Tools
Nominations Open for CEO Vision Awards

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 Colors

Triadic swatches:

Triadic Color Swatch Example

Triadic Color Swatch Example

Triadic Color Swatch Example

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

Alternate Complement Example

Tetrad Example


Example: adelaide36ers.com

Screenshot:

adelaide36ers.com

Triadic Color Swatch Example

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.

[To be continued in part 2. -Ed.]


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



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 >
How to Create an Ajax Autocomplete Text Field: Part 10 · Adding Client Capabilities to Server Controls Using the ASP.NET AJAX Control Toolkit · JavaScript and HTML Tricks
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Palm's Treo Presses On (iPhone Who?) · Toshiba Extends Notebook Line with 5400 and 7200-RPM Drives · Epson Kicks Color Cost to the Curb

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

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