The Art of Logo. Part I: Your Media. Colors | WebReference

The Art of Logo. Part I: Your Media. 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  Fractal Design Logo

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  Colors must support the form, not clash with it

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