spacer

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

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

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

Developer News
Google to Shake Up Browsers With Own Launch
Mozilla's Ubquity Mashup: For The Masses?
iPhone Users Just Want to Have Fun

Choosing a Color Scheme

Successful colors schemes online are chosen to support the goals of a site, be they to strengthen branding, increase sales, or maintain readership. An intelligent color scheme not only looks good, but also creates a feeling in the audience. If you choose a scheme that does not support your goals, then you have fallen short of the potential of your site.

Color can assist in achieving goals by suggesting and atmosphere that visitors can identify with. For example, a site selling baby products could use vibrant scheme that parents would appreciate as a bright and positive influence, while an art gallery could employ a black background that presented an impression of sophistication and luxury.

While there is more to be considered than making an attractive site, knowing how to create a harmonious color scheme is a strong start. Harmonious color schemes are derived systematically from the basic color wheel of tertiary colors. For the purposes of this grounding, they are of four types: monochromatic, analogous, complementary, and triadic. Using each, it is best to aim for a selection of three or four distinct hues, coupled with neutrals.

Monochromatic

Monochromatic color schemes are derived from a single base color, and extended using its shades and tints (that is, a color modified by the addition of black and white). Consider, for example, a saturated green (RGB {0,255,0}). The swatches each show the pure hue in the center, with white being added to the right, and black to the left. In each case, the core hue remains identical.

Monochromatic Swatches

Monochromatic swatches:

Green

Orange

Blue

As you can see from the wheel above, by altering the value of this pure hue we can create colors that cleanly support the original.

Photoshop Color Picker

In Photoshop, changing the value next to the H in the color picker can alter hues. Adjusting the brightness is done using the value alongside the B. The S signifies the saturation of your color. The latter two values are measured as a percentage, while the hue is measured in degrees, positioning the hue on a color wheel.


Example: Victoria's Secret uses a pink color scheme

Screenshot:

victoriassecret.com

Pink Color Swatch

This site bases its scheme around a feminine pink. The monochromatic scheme avoids detracting from the key, full-color photographs that sell the product.


Example: evolt.org uses a Dark Green scheme

Screenshot:

evolt.org

Green Swatch

Here, the monochromatic scheme keeps the focus on the content within the site.

A monochromatic color scheme is often considered for sites where content is of extreme importance, or when the opinions presented are of a moderate nature. It can give a site a clean and classic look, but also provides excellent opportunities to let full color photographs dominate. Monochromatic schemes are often appropriate for serious political and business sites such as those of some banks where instilling customer confidence in their experience. They are also highly suited to fashion sites where the understated monochromatic scheme supports the branding, but nevertheless allows the photographical elements to provide a focus.


home / authoring / graphics / color / nondesigners / chap2 / 1 To page 1To page 2current pageTo page 4To page 5To 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

Solutions
Whitepapers and eBooks
Intel PDF: Virtualization Delivers Data Center Efficiency
Intel eBook: Managing the Evolving Data Center
Microsoft Article: BitLocker Brings Encryption to Windows Server 2008
Symantec eBook: The Guide to E-Mail Archiving and Management
Microsoft Article: RODCs Transform Branch Office Security
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
Avaya Article: Advancing the State of the Art in Customer Service
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Intel Seminar: Efficiencies in Hardware/Software Virtualization
HP Webcast: Disaster Recovery Planning
Go Parallel Video: Performance and Threading Tools for Game Developers
HP Video: StorageWorks EVA4400 and Oracle
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
IBM TCO eKIT: Your IT Budget is Under Attack, Get in Control
IBM Energy Efficiency eKIT: Learn How to Reduce Costs
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
Microsoft Article: Silverlight Streaming--Free Video Hosting for All
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
HP Demo: StorageWorks EVA4400
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
The Partial Function Application in JavaScript · Creating Dynamic RSS Feeds with Ajax · Performance Optimizations for High Speed JavaScript
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Cablevision Deploys More Hotspots for Commuters · Dell Joins the Netbook Movement with its Inspiron Mini 9 · It's Official: Dell Enters the Netbook Fray

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

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