spacer

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

home / experts / dlab
 
Developer News
MicrosoftÂ’s Automated Agent: Can We Talk?
Borland Finally Sells CodeGear
Red Hat Heads For The JON 2.0
  Colors
 
 

Now that we have a decent form, it's time to paint it with some colors---and to discuss the role of color as a media in logo making.  But before we dive into the artistry, let me remind you that if your logo is intended for displaying on the Web, it is preferable to use the so-called browser-safe palette to avoid dithering on 256 color monitors. (Also, you can check out another Design Lab article for a more general, not logo-related, analysis of colors in web design.)

Apart from that, there are lots of other restrictions on the use of colors.  First of all, colors must not be many.  (There may be hundreds of in-between hues, of course, but here I refer to the "primary" colors that dominate the picture.)  As with form, color solution of a logo favors reservedness and simplicity.  As your mouse budges to select a color for an element, think thus: "What is this, anyway?  What parallels this element in the composition?  What opposes it?  Is it possible to choose one of the colors I've already used for other elements?"  Of course the overall impression is your ultimate criterion, but this simple approach will at least prevent you from doing many common mistakes (although, admittedly, it may as well prevent you from finding some cool solutions).

 

  There's an exception to this color minimalist principle. Some logos, such as the logo of Fractal Design Corporation (Fig. 7), feature an unusual number of bright colors mixed together.  Nevertheless, such a motley color, when used properly, is perceived as a whole by the human eye and does not break color integrity of the design.
[Fig.7]
Fig. 7  Fractal Design Logo

[Fig.8]
Fig. 8  The color wheel for choosing hue in HSV
If you've ever worked with a painting program you should be aware of the way the colors are built on the computer.  There exist a number of color systems each allowing to represent any given color as a combination of a few (usually three) parameters or "basic colors" (such as red, green and blue).  For artistic purposes the HSV system is of most utility.  In HSV, any color is decomposed along three axes: hue---a pure rainbow color from the color wheel (Fig. 8), saturation---the proportion of this pure color vs. colorless gray, and value (also called luminance)---the overall brightness of the color.  

  There's no overestimation in saying that the key to working with colors professionally is the ability to think about them in HSV terms.  Many of the tips that you'll hear around are almost straightforward once you apply the HSV ruler to them.  For example, it is common to divide all colors into warm (red, yellow) and cool (blue, purple) ones, and if you try to locate them on the color wheel you'll see that all warm colors are simply those to the left from the vertical diameter while the cool ones are to the right.  Also it has been suggested that the best-matching colors are those that are located on the wheel at the distance of one quarter (90 degrees) from each other.

One more---and probably the most important---consideration is that colors should help express the logic of the form, not conflict with it.  For instance, if your logo represents a book, you can paint it all in one color (say, red), but you can't make the cover light yellow and the pages brown (i.e. darker), because this contradicts to our real-world experience saying that book pages are always at least as light---or lighter---than the cover.  In other words, you're welcome to transform the usual colors associated with objects, but you cannot totally disregard them.

 

  So, then, what about our sample logo?  What is the logic of its visual shape?  The three squares shown at different angles obviously represent three stages of a process, or three members of one sequence; it would be natural to paint them in three colors that, too, form an outspoken sequence.  In nature, of the three HSV parameters (hue, saturation, value) only the value, i.e. brightness, can serve as a base for forming such a sequence.  Indeed, one color may appear darker or lighter (e.g. depending on light conditions), but as soon as it changes its hue or saturation we most probably won't consider it the same color any more---the logic of transition will be broken.

I have kept the light blue color for the topmost square and used this color as the base of the sequence, painting two other squares with its darker shades.  I also removed the squares' outlines that are now unnecessary (Fig. 9).  Voilà!  Our logo has become quite persuasive and visually interesting.

[Fig.9]
Fig. 9  Colors must support the form, not clash with it
 


Comments are welcome
Produced by Dmitry Kirsanov and

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
Microsoft Article: HyperV-The Killer Feature in WinServer ‘08
Avaya Article: How to Feed Data into the Avaya Event Processor
Microsoft Article: Install What You Need with Win Server ‘08
HP eBook: Putting the Green into IT
Whitepaper: HP Integrated Citrix XenServer for HP ProLiant Servers
Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 1
Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 2--The Future of Concurrency
Avaya Article: Setting Up a SIP A/S Development Environment
IBM Article: How Cool Is Your Data Center?
Microsoft Article: Managing Virtual Machines with Microsoft System Center
HP eBook: Storage Networking , Part 1
Microsoft Article: Solving Data Center Complexity with Microsoft System Center Configuration Manager 2007
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Intel Video: Are Multi-core Processors Here to Stay?
On-Demand Webcast: Five Virtualization Trends to Watch
HP Video: Page Cost Calculator
Intel Video: APIs for Parallel Programming
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
Microsoft Silverlight Video: Creating Fading Controls with Expression Design and Expression Blend 2
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Sun Download: Solaris 8 Migration Assistant
Sybase Download: SQL Anywhere Developer Edition
Red Gate Download: SQL Backup Pro and free DBA Best Practices eBook
Red Gate Download: SQL Compare Pro 6
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
How-to-Article: Preparing for Hyper-Threading Technology and Dual Core Technology
eTouch PDF: Conquering the Tyranny of E-Mail and Word Processors
IBM Article: Collaborating in the High-Performance Workplace
HP Demo: StorageWorks EVA4400
Intel Featured Algorhythm: Intel Threading Building Blocks--The Pipeline Class
Microsoft How-to Article: Get Going with Silverlight and Windows Live
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Perl Pragma Primer · Implement Drag and Drop in Your Web Apps: Part 2 · How to Create an Ajax Autocomplete Text Field: Part 5
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
SQL Server 2005 Express Edition - Part 22 - Upgrading from Microsoft SQL Server Desktop Engine (MSDE) · Vyatta: Downgrades that Pay Off · NetMotion Brings Cross-Network Support to Wireless VoIP

Created: Jan. 19, 1997
Revised: Jan. 23, 1997

URL: http://www.webreference.com/dlab/9701/colors.html