...making Linux just a little more fun!

<-- prev | next -->

Design Awareness: What Parachute Is Your Color?

By Mark Seymour

Colors are, for all of us except those unfortunate enough to be blind to them, much of the way we perceive the world. They are so powerful that they've even made themselves part of our language, as written on our very faces: green with envy, red with anger, gray with pain.

We use them every day, almost without thinking, to create any of the visual media: painting, photography, design. In traditional forms, your eye and hand skills were all you had to create, compare, and reproduce colors, and the number of colors you can create from oil paints or watercolors, for example, is nearly infinite. Computers have given us powerful tools to manipulate color (Gimp and Photoshop are two common examples), yet have forced us into ever narrower color gamuts.

Gamut is one of those 'techie' words many of us use without exactly understanding its meaning. The earliest dated reference I could find was "Gamut, the scale, or rudiments of music" in a book entitled The Sacred Harp, A Collection of Psalm and Hymn Tunes, Odes, and Anthems, Selected from the Most Eminent Authors: Together with Nearly One Hundred Pieces Never Before Published; Suited to Most Metres, and Well Adapted to Churches of Every Denomination, Singing Schools, and Private Societies. With Plain Rules for Learners. It was published in Philadelphia in 1860, as a "New and Much Improved and Enlarged Edition", by B.F. White and E.J. King, who knew a thing or two about writing titles, if nothing else.

The Oxford English Dictionary gives this definition:

  1. the complete range or scope of something
  2. Music: a complete scale of musical notes; the compass or range of a voice or instrument
  3. Historical: a scale consisting of seven overlapping hexachords, containing all the recognized notes used in medieval music

from the Latin gamma ut (in sense 4): the Greek letter gamma was used for bass G, with ut indicating that it was the first note in the lowest of the hexachords example: run the gamut; to experience, display, or perform the complete range of something [1]

The glossary of the School of Design at Arizona State University defines it as an "entire series of recognized notes" along with numerous mathematic and geometric definitions, though oddly enough without any color reference. The glossary at the Rochester Institute of Technology defines it as "The entire range of perceived color that may be obtained under specified conditions", a delightfully vague academic definition. (I've appended a list of glossaries at the bottom of this column; you may find them useful for other graphics terms.)

So it appears the term began in the music world and then purloined by the design world, but still means basically the same thing: the range of perceivable items, whether notes or colors. However, that's not the same as the range of everything we, as observers, can visually perceive. It's the range of whatever device (computer monitor, printer, ink system, film, camera CCD, etc.) we're using can perceive. And they, lamentably, are all different from each other and from our eyes.

There have been many color-definition systems set up, each with its own gamut, in an attempt to standardize and codify the use of color. Few in this industry are old enough to remember printing prior to the development of the Pantone system of printing inks, but imagine trying to tell your printer exactly what green you wanted to use: "Sort of an Irish mossy green, with just a hint of lemon, really, and a touch of blue like that cloudless sky I saw when I went to New Mexico and got drunk and fell down last summer." This sort of ambiguity led to endless rounds of 'ink drawdowns' (a quaint and now almost-unheard-of practice of actually mixing a little can of ink to your nebulous specifications, rolling it out onto high-gloss proof paper, drying it, and sending the sheet over to your office for approval and revision: "No, no, a little more yellow") and arguments over exactly what color any particular color actually was. (Try 'matching' a color to an object before there were scanners!) Fortunately, in the early 1960s the Pantone Matching System (thus the phrase 'PMS color') was released to printers and designers, and things pretty much settled down until the advent of the Macintosh.

Oh, there was the constant struggle to 'match' a PMS color to its rough equivalent in CMYK inks (the first of many gamut disparities), but Pantone and other ink systems like Toyo (though to view a classic example of the worst of Japanese design see their Japanese web site, where a flying cartoon lion first paints in their logo on-screen and then goes to sleep and blows snot bubbles; would I kid you about a thing like that?) soon issued their official 'cracks' of their colors, and you became pretty much stuck with whatever they showed.

But the gamut compatibility problem really got going when you began to display color in RGB on color monitors, and the argument heated up over what color you were really looking at versus what color would appear when the file was either output to film (and thus converted to CMYK) or, worse yet, output on some other device, like an ink jet or laser writer printer.

Let's look at the differing gamuts we commonly work with, and see why this gamut war is still on-going and may never be resolved.

You're reading this on a computer monitor which displays information in RGB (red, green, and blue, the colors originally generated by the phosphors activated by the electron beam in a television). This column was created using Adobe GoLive on a Macintosh flat-screen LCD monitor. GoLive allows me to define the color of objects on the screen in RGB (the 'native' gamut for monitor-based material), CMYK (the gamut for process color printing inks), HSB (hue, saturation, and brightness), and HSV (hue, saturation, and value); the latter two gamuts are derived from classic color theory and use color 'wheels' to describe color:

Photoshop, like other graphic design software, also provides a wide range of color pickers including, along with the Pantone and Toyo colors, the ANPA, DIC, Focoltone, HKS, and Trumatch systems. (It also has a 'Lab' color picker, which I confess to not understanding at all, try as I might. If anyone out there does, send your explanation along.)

No matter what gamut you pick, however, it limits you to significantly different numbers of colors:

Yet browsers navigating the Internet are limited by the convention of HTML to 216 'web-safe colors', from FFFFFF to 000000. Is it any wonder that designing for multiple mediums (print & web) can be a pain? Let's say you have a logo that you want to print in PMS 123, a nice golden yellow:

Yet, what is that color really? Pantone says it's simply ink number 123 on coated stock. Easy enough to specify, and easy for the printer to mix and print. But let's say you want to print it in a brochure along with color photographs, thus you need its equivalent in process (CMYK) color to make it cheaper and easier to print. The 'crack' for that color in Photoshop (I'm trusting them here; I didn't check my Pantone book) is 0C 24Y 94M 0K (which I will now translate into the unpatented SeymourCMYK system nomenclature, 0.24.94.0, which we will use henceforth), yet that color isn't available in web-safe colors for use on your web site, so we have to nudge it to 4.21.87.0, which translates in hex to FFCC33. While PMS 123 is defined as 255.196.36 in the RGB gamut in Photoshop, when entered as such via the RGB picker in GoLive it displays as the non-web-safe hex color FFC424. Resetting it to FFCC33, per our Photoshop definition, it becomes 255.204.51 in the RGB gamut. Worse yet, the CMYK sliders equate that to 0.51.204.0, which no one will ever understand.

So, what color are you using? Depends. If you take the exact same PMS color and attempt to reproduce it in Photoshop, InDesign, and GoLive (hey, I've got friends at Adobe, what can I say?), let alone the Apple applications, you'll come up with completely different colors. Here are screen captures of what several different applications generated as PMS 123, for comparison; the distinction is subtle, but obvious:

Let's attempt to look at using color, now that we've thoroughly confused ourselves as how to define it, to describe objects or feelings or states of being. Because that's what we really do in design, isn't it? Some one says they want their logo to be a nice apple red. Do they mean the red of an apple you buy in the grocery store (and which variety, and is it ripe or not ripe?), or do they mean a nice Apple red? Back in the day, the logo of Apple Computer used to be PMS 185, which looked a lot like this (on my screen, at least) when printed:

Yet that color red is 0.255.255.10 in the GoLive CMYK picker, while PMS 185 is defined as 0.91.76.0 in the Photoshop CMYK picker, which looks like this color when you set the equivalent (0.233.195.0) in GoLive:

Do we go with what looks right (and to whose eye, and on what monitor, and when was the last time you calibrated it and to what?), or do we go by the numbers? Depends. Are you just displaying it on someone's monitor via the web, or are you trying to match a printed color? If it's web-only, and especially if you can test it across a suite of CPUs and monitors, so much the better. If you're trying to match something printed, whether it's a PMS color or a CMYK color, that pretty much hopeless, as we've seen.

We'll go with what looks right, and hope it looks 'right' on your monitor as well. (For those of you benighted people viewing this on a CRT monitor running Windows, good luck.)

Choose an object or a feeling to mimic in color. Something difficult to describe. Something subtle. That sultry blonde you saw on the beach during your vacation in Brazil, say. (If you find yourself tasked with creating a travel brochure, you can bet that's what the client is seeing in his head...) Or the cool blue tones of a fresh snowfall. (Remember our work with Alpine Gear?) Or a delicious dark bar of chocolate. (Milk chocolate? Semi-sweet? With nuts or without? Almonds or peanuts? See how hard this is?) Even the "golden yellow" we were trying to imitate with PMS 123 isn't really gold, but trying to represent the color of the actual metal, whether printed or on-screen, is nearly impossible:

Worse yet, try and combine these disparate things and see where the string of adjectives leads you:

a sultry, tan Brazilian blonde, in a bikini the sea-green color of shallow Bahamian waters, eating a thick bar of Swiss milk chocolate while standing on gold-plated skis in the midst of an icy Norwegian glacier.

Sure, you can see her in your head, but try deciding which colors you should use to represent that image... (For those whose gender identification requires it, please substitute 'blond' for 'blonde' and 'his' for 'her'.)

But we're idiots, we designers, so we'll try. And we'll do them all in the HSB gamut (just to be a nuisance), leaving the conversions for someone else:

her tan
her blonde hair
her bikini
the chocolate
the skis
the glacier

Nice, but not quite the picture you formed in your head, is it? But they are certainly evocative colors, and you could play around endlessly with tweaks to the formula to find some that were closer to that bikini-clad, chocolate-eating skier you (or the client) were imagining.

Applying this palette to your client's brochure for chocolate (or bikinis or ski equipment or resort travel), you can now hope that every design feature (headlines, tables, text blocks, leader lines, color backgrounds) will somehow evoke the tantalizing picture that inspired the choice of these colors.

But now let's try and pick colors to represent a real Brazilian woman standing in real Brazilian water (and what intelligent Brazilian woman would ever find herself on a Norwegian glacier, even to eat chocolate?):

Much harder, isn't it? (And that's why photography replaced artwork early on. Look back at ads from the 1950s, with their painted and airbrushed illustrations: flat colors and simplified forms. Yet it's considered very retro to mimic that today.) So which part of her, precisely, shall we pick to stand for 'tan'? Should wet hair or dry hair represent 'blonde'? Which of the several colors of her suit cry out 'bikini'? What part of the surf would say 'ocean'? What part of the sky might mean 'sunset'? Tricky business, this color.

Where does this all leave us, besides pissed off and frustrated with the vagaries of color systems, software programmers, ink manufacturers, and the limitations of technology in general? With the notion, first of all, that no amount of technology or software gimmickry can truly replace a good eye. If you have one, bless you and use it well. If you don't, and not every designer does, you'll have to decide where your strengths lie and work around them. For instance, I can't open Photoshop and 'paint' an image any more than I ever could with a box of crayons. Actually, I do better with the crayons. But if you think we've come a long way since we were kids, remember that HTML can handle barely twice as many colors as Crayola:

The parti-colored images and Flash animations flooding the web these days will never come out of my box of tricks. But I can, if I work at it, come up with a color way for a logo, a brand, or a product that can be utilized effectively across print and video and the web. By analyzing the needs of the piece, so can you. But turning those colors into artful designs that entice the viewer and sell the product (and thus please the client), that's what will separate you from a guy or gal who can just turn on the computer and double-click the Photoshop icon. Solving the what-color-is-this problem? Perhaps not fixable. My suggestion is to determine where the majority of the work will be seen, whether web or print, and choose your gamut accordingly. CMYK, of course, if you're going mostly to print, and use the official Pantone (or other patented color system) 'crack' to represent its flat colors in CMYK. You can reproduce the CMYK fairly easily in any web-content generator. RGB if you're going web, and do the best you can to represent that in CMYK for any print that results. Remember, no matter how good the software, no ink-on-paper version will ever have the luminosity or depth of colors displayed on a good computer screen, even black.

I hope this has inspired you to wrestle with the complexities of color. It's worth the battle, unless you like to see the world this way:

As ever, let me know what design issues you'd like explored.

[1] Not to be confused with "running the gantlet", let alone the often-misused "running the gauntlet", like the Clint Eastwood film of that name. A gantlet is "receiving blows while running between two rows of men with sticks", while a gauntlet is "a stout glove with a long loose wrist". The English insist on using the same spelling for both, but that's just being silly...

We also received a great logomatopoeia submission from a viewer (a professor of design history in Cleveland, no less), the logo for Davey Tree, a national tree service company. My thanks, and keep 'em coming:


Graphic term glossaries:
http://www.4dimension.com/glossary.html
http://amol.org.au/capture/course/glossary.html
http://www.rockprint.com/dictionary.shtml
http://www.globalimaginginc.com/resources/glossary.shtml
http://www.creativepro.com/printerfriendly/story/11132.html
http://www.binarygraphics.com/glossary/color.html
http://www.colourguru.com/glossary.html

 

[BIO]

I started doing graphic design in junior high school, when it was still the Dark Ages of technology. Bill Gates and Steve Jobs were both eleven years old, and the state of the art was typing copy on Gestetner masters. I've worked on every new technology since, but I still own an X-acto knife and know how to use it.

I've been a freelancer, and worked in advertising agencies, printing companies, publishing houses, and marketing organizations in major corporations. I also did a dozen years [1985-1997] at Apple Computer; my first Macintosh was a Lisa with an astounding 1MB of memory, and my current one is a Cube with a flat screen.

I've had a website up since 1997, and created my latest one in 2004. I'm still, painfully, learning how web design is different from, but not necessarily better than, print.

Copyright © 2005, Mark Seymour. Released under the Open Publication license unless otherwise noted in the body of the article. Linux Gazette is not produced, sponsored, or endorsed by its prior host, SSC, Inc.

Published in Issue 116 of Linux Gazette, July 2005

<-- prev | next -->
Tux