"Why Don't My Colors Match?!"

Understanding the Mechanics
of Color Modes for Weband Print

Written by Mike Hamers, Lightspeed 
  Edited by Kate Hamers, Lightspeed and Kris Green, Turn Words 2 Money

Ask children "what’s your favorite color" and you get instantaneous and exuberant responses. The truth is, at any age, we select or reject everything from clothes to cars based on what colors say to us.

In this Newsletter You Will Discover:
   • The Power of Color – how it’s used as a tool
   • A mini-overview of color theory and how Pantone organized color
   • An overview of common color modes: Formula, CMYK, RGB & Hexidecimal

The POWER OF COLOR: Impact, Organization & Emotion

Color Creates Visual Impact.
Color is eye-catching. It makes you look. If color captures your attention, you can use color to keep drawing the eye’s attention over and over again for flow through your design. The eye will follow color around your composition like a dog follows the cook in the kitchen.

      

Color Organizes.
Imagine you’re in an airport terminal. You see a large group of people wearing red T-shirts. Either they’re all part of the same group or it’s a freakish coincidental convergence of red T-shirt lovers. My money is bet on the group thing. Color can be used for gathering and organization information in a meaningful and eye-appealing way.

Color Evokes Emotion.
For example, the concept of team colors, like Bronco orange, is meant to inspire strong emotions and team spirit. The kind of emotions we feel, however, depends on whether we’re looking at the home team’s colors or the opposition’s. So, once again, designers are tactical about employing color persuasively.

Color has Symbolic Meaning.
Although humans do respond physiologically to color, most of the emotional muscle we attach to color and its symbolism is learned.  For example, we learn that red can mean “stop, fire, blood or danger” through our environment situations. Green means money or ecology; red with green means Christmas; red, white & blue evoke patriotism; black with orange are for Halloween.

Color is a Key Element of Brand Identity.
Color is an extremely important and powerful tool to use in branding.
  • Color increases brand recognition by up to 80%!
  • 60% of the decision to buy a product is based on color alone.
Brands and colors are inextricably linked because color offers an instantaneous method for conveying meaning and message without words. Color creates emotion, triggers memory, and adds sensation. When someone looks at a logo, the color is the foremost thing that they remember. This knowledge has led many companies to trademark their color within their industry.

      

Color is the visual component people remember most about a brand followed closely by shapes/symbols then numbers and finally words. For example, the real McDonald's is easy to detect in the image below. Many of the most recognizable brands in the world rely on color as a key factor in their instant recognition.

Color carries enormous technical challenges in ensuring consistent appearance in both print and on-screen, digital output vs traditional printing, variance in different software, effects of background colors and paper textures (glossy vs matt) when printed.  Understanding the RGB for web, CMYK and Pantone colors for print is critical.  There are no off-the-shelf solutions. When used effectively, color helps build meaning, effects memory, and influences product differentiation.

Where Does Color Come From?

The detailed understanding of color began in 1666, when Sir Isaac Newton, using two prisms, observed that white light was composed of all the colors of the "rainbow", and could be identified and ordered. Newton first used the word "spectrum" for the array of colors produced by a glass prism. He recognized that the colors comprising white light are "refracted" (bent) by different amounts and he also understood that there is no "colored" light, the color being in the eye of the beholder. Instead, there is merely a range of energies – or the proportional frequencies and the inverse wavelengths. Newton assigned 7 colors to the spectrum akin to the musical scale (below).

Pantone Standardizes Modern Color Needs.
Pantone started off around 1950 printing color guides for cosmetic companies. They would use around 60 different pigments and mix them to match the colors they were looking for. At that time, colors were not yet standardized, so different printers had to kind of make vague guesses to match each other. The example people love to cite is Kodak. Remember that orangey-yellow of Kodak packaging? Since colors weren't standardized, that yellow would look slightly different depending on where it had been printed. The company found that customers would opt not to buy Kodak film when the packaging was slightly darker than usual, since they thought it looked less fresh. The company needed their branded color to be consistent so that their sales could be consistent. So the demand arose for a new system of standardization for color printing.

      

In 1956 a young chemist named Lawrence Herbert started working part-time for Pantone to make some money before heading to medical school. He soon got so interested in his work at Pantone that he decided to skip medical school. Instead, in 1962, he bought the printing division of Pantone and began refining the color matching system.

Using his chemical expertise, Herbert found a way to reduce the basic building blocks of printed color: instead of starting with 60 pigments and mixing via trial-and-error, as had been the protocol, he now worked with only 10 pigments, and created standard “recipes” for printers to follow in order to achieve uniform results. This crucial development was called the Pantone Matching System (PMS).

Herbert quickly expanded Pantone's reach into other industries beyond printing, like textile design and fine arts materials in the '60s, and digital computing in the '70s and '80s. By 2001, they had expanded their color palette to 1,757 distinct hues. Constantly improving their technology and making licensing agreements with other producers, Pantone's colors are more varied and dynamic than other color techniques, meaning that the company is able to produce unusual colors like fluorescents (after a licensing agreement with Day-Glo). Pantone also works to make their colors consistent and available across all platforms, so colors can match on textiles, printed paper, digital materials and other media.

The importance of Pantone in corporate design and branding is evident from the Kodak anecdote. Think about how much we associate colors with brands! Coke red, UPS brown, Tiffany blue, Hermes orange…
And for those of us who aren't concerned with branding, we still want the color of the bedspread in the catalog to match the color of the bedspread when it comes in the mail.

COLOR SYSTEMS:
How to Create and Specify Colors for Consistency.

The Pantone Color Matching System is largely a standardized color reproduction system. By standardizing colors, different manufacturers in different locations can all refer to the Pantone system to make sure colors match without direct contact with one another. Pantone colors are described by their allocated number (typically referred to as, for example, "PMS 130"). The Pantone company produces color guides for a number of types of colors, including: Spot Colors, CMYK guides, Metallic Inks, Pastel Colors, Spot to CMYK conversions, and more.

1) Pantone Spot (Formula) Colors for perfect printing.
Pantone Spot Colors are basically "custom colors" and are created from combinations of 13 base pigments (15 including white and black) mixed in specified amounts to create the 1,677 Spot or Formula Colors.

NOTE: CMYK cannot match many of these colors with it’s limited base of only 3 pigments (cyan, magenta, yellow) plus black compared to Pantone's 13.

The 2013 PLUS SERIES FORMULA GUIDE is used for selecting, specifying and matching solid PANTONE Colors and features all 560 new colors, added since 2010 for 1,677 colors to choose from.

In offset printing, a Spot Color is any color generated by an ink (pure or pre-mixed) that is printed using a single run. It is technically a custom color (as opposed to process- color in CMYK printing). Offset printers around the world use the term spot color to mean any color generated by a non-standard offset ink; such as metallic, fluorescent, spot varnish, or custom hand-mixed inks.

When making a multi-color print with a Spot Color process, every Spot Color needs its own lithographic film. All the areas of the same spot color are printed using the same film, hence, using the same lithographic plate. The dot gain, hence the screen angle and line frequency, of a spot color vary according to its intended purpose. Spot lamination and UV coatings are sometimes referred to as "spot colors", as they share the characteristics of requiring a separate lithographic film and print run.

2) CMYK (Cyan, Magenta, Yellow, Black) Model for printing.
Cyan, magenta and yellow are the three subtractive primaries. Nearly any color can be produced with different combinations of these three colors. When you mix all three together in equal amounts, you get a near black.

These three primaries are the basis of the subtractive color model. That's why it's called the CMY model. In theory, you can mix any reflective color by mixing a combination of cyan, magenta and yellow. In the real world, however, the inks that printers use are not perfect. This becomes most obvious when you mix all three to make black. The color that results is muddy brown, due to impurities in the inks. That's why printers use black ink to get the best results.

Many desktop printers and traditional "four-color" printing presses use the CMYK model. In the CMYK model, by using cyan, magenta, yellow and black inks or paints, you can mix nearly any color and is perfect for lowering the cost of large volume printing.

Subtractive colors get darker when mixed. Each of the mixed paints or inks absorbs different components of the light. If the right combination of paints is mixed together, all of the components of light are absorbed and the result is a near black.

When preparing a color image for printing, the prepress operator makes four separation plates. Each plate is for one of the four colors of ink in the CMYK model. When all four plates are aligned and printed on top of each other, the inks will combine to simulate the proper colors. This method is referred to as "process color" (or "four-color") printing.

      

3) The RGB Model for color created by mechanical devices.
In the world of mechanical things that create color, like your iPhone, TVs or a computer screen, we use technology in the RGB model where red, green and blue dots are assigned brightness values along some scale, for example 0 to 255, where 0 is dark and 255 is bright. By listing the three values for the red, green and blue phosphors, you can specify the exact color that will be mixed.

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256). Most modern monitors are capable of displaying at least 16,384 different colors.

Additive colors where they get lighter when mixed together. As each component of light is mixed in, the combination becomes a new color. Red, green and blue are the three Additive Primaries. You can mix any color of light with different combinations of the additive primaries. When you mix all three together in balanced amounts, you get white. These three primaries are the basis of the additive color model. It's called the RGB model, and it's usually used to create color on your computer display and other electronic devices.

By mixing together various amounts of red, green and blue light, you can make almost any color. The RGB color space is a multi-colored cube with different points showing what colors different mixtures of red, green, and blue make. Television screens and computer monitors make their colors by mixing red, green and blue lights. A monitor or television screen mixes a color by illuminating tiny dots of red, green and blue phosphors with an electron gun located at the back of the monitor or with LED technology. By illuminating each of the dots to a different brightness, the monitor creates different colors.

4) CODING NOTATION: Hexidecimal Web-based Color.
In the RGB Color System used in computers there are 256 possible levels of brightness for each component in an RGB (Red, Green, Blue) color. So the red component, blue component and the green component can each be represented by a byte, or two hexadecimal digits. An entire RGB color can therefore be represented by six hexadecimal digits to indicate a specific color of the millions possible.

Pixels on back-lit screens are dark until lit by combinations of red, green, and blue. Hex numbers represent these combinations with a concise code for web-based colors. That code is easily understood and using this system allows for greater color options when using html.

In CSS there are two main ways of indicting colors. The first is to simply use the color vernacular name, like this: background-color: blue;

Obviously this is limited as a computer can display millions of colors, and remembering the names of every single one of them is impossible (not to mention the poor guy whose job it is to come up with all those names! This is why CSS uses hex codes, like this: background-color: #DDEEFF;

Basic Hexadecimal Notation: The 6-digit representation of color known at the hex code uses a model of 16 alpha/numeric digits: 0 1 2 3 4 5 6 7 8 9 A B C D E F

Zero, "0", is the smallest representations of a color. It's almost the total absence of color. F is 15 times the intensity of the color of 0. Combinations of these digits create different shades of a particular color. Double Zero, "00," is equal to zero hue– so FF is equal to a pure color, for example.

This color representation is done three times: once for red, once for green, and once for blue, in that order (see diagram below). Put the three, two-digit, codes together and you get a 6-digit hex code. The hex code is just a representation of the red, green, and blue intensity, in that order. The computer creates the three intensities, mashes them together, and you get a single shade of color. For an example, here are the opposite ends of the color scale: FFFFFF

The code FFFFFF is equal to white. Why? Notice the three colors are all set to FF. That means the highest level of red, green, and blue.  As I said above, in a computer, or television, the combination of all three primary colors creates white. Now here's black: 000000.This is just the opposite. All three settings of red, green, and blue are set to a total absence of color = Black.

      
To make sense of #970515, we need to look at its structure: The first character # declares that this “is a hex number” in html code. The other six are really three sets of pairs: 0–9 and a–f. There are 3 two-number pairs and each pair controls one primary additive color.

Each pair can only hold two characters, but #999999 is only medium gray. To reach colors brighter than 99 with only two characters, each of the hex numbers use letters to represent 10–16.  A, B, C, D, E, and F after 0–9 makes an even 16, not unlike Jacks, Queens, Kings and Aces in cards.  
                              

Links to some Free great resouces:
  • Official Pantone site for color info, ordering reference guides and more.

  • Convert Hex color code to RGB and RGB to Hex (Hexadecimal).
This free color converter gives you the hexadecimal values of your RGB colors and vice versa (RGB to HEX). Use it to convert your colors and prepare your graphics and HTML web pages.

To Your Success – MH

ABOUT MIKE HAMERS Mike Hamers is an award-winning graphic designer, illustrator and author who lives and works just outside Boulder, CO. He has been the owner of Lightspeed Design for 23 years. During that time he has won over 20 national and international awards for this logo design, stationery, packaging and font designs. Mike has had his illustrations in Wired magazine and brochure design work in "The Little Book of Layouts: Good Design and Why It Works".  Mike enjoys working with all size companies – from solopreneur's startups to large national companies. His broad experience crosses most industries including bio- and nano-science, biomedical devices, technology and manufacturing, software, foodservice, and more. Mike's comprehensive design and illustration portfolio is viewable at http://www.Lightspeedca.net. Are You Interested in a:     – Comprehensive "Brand Audit"     – FREE 30-Minute Coffee Critique of your        current logo and branding     – Price quote on full rebranding or design        of your of your company logo        To Your Success, Mike Hamers

     To Read Past Issues of the Newsletter – Link to Index

Read what others are saying > Testimonials

More Award-Winning Logos (pdf) > click here  

More Business Cards (pdf) > click here  


 Online Portfolio >