matching-color-web-logo

A practical look at using colors in your logo, matching it to your website, and why some colors you find on the Internet won’t print on your business card, letterhead or brochures.

This isn’t going to be a treatise on color psychology and logos (done that) nor is it going to be a feature to help you choose the best colors based on what the big brands are doing (done that too.) While it won’t be as technically in-depth as this feature on color spaces, it’s going to offer some quick ‘n’ dirty information on the different types of color spaces and why some colors you find on the Internet simply can’t be translated into printed goods outside the digital realm.

The wisdom of sampling colors from photographs?

Sometimes you’ll bump into a photograph with great colors that you’d like to match for your logo. Perhaps you’ve taken a photograph of something that you The Logo Factor buyers editionjust love the color of. Maybe you’ve even got an old pixelated version of a logo you want re-rendered and matched for colors (we run into this a lot when repairing logos for clients.) Unless the color field we’re trying to take a sample from is completely solid and flat (a colored box for example) sampling colors from photographs can be a bit of a pain. Let’s take the photograph above – a picture of four tubes of oil paint that are red, yellow, green and blue. Should be a snap to sample from any of them right? Maybe not. As we touched on in a earlier post on resolution, pictures are made up of square blocks of color called pixels which combine to make a total image. In reality, each paint smear consists of several tones and shades of red, yellow, blue and green. Let’s take a look: sample-photo-logo-colors-swatchesWe’ve exaggerated this a bit to make a point but the obvious question here would be “which red” or “which yellow” would we sample to match? Bottom line here – if you want to match logo colors to an image you’ve found on the Internet, select the image carefully for large flat color blocks. Otherwise be prepared for a lot of “a little lighter” and “a little darker” in the color finalizing stage.

Types of colors.

We go into this in much more detail here, but as a quick overview there are three types of colors you’ll bump into whenever you’re working with your logo or digital branding assets. Based on where your logo is being reproduced they are:
rgb-cmyk-spot-colorsA) RGB (Red, Green, Blue) or how any electronic screen on TVs, tablets and smartphones makes up colors,
B) CMYK (Cyan, Magenta, Yellow, Black) or how any full color printing mixes colors – newspapers, catalogs, brochures – and
C) Pantone Spot Colors. Spot colors are when instead of mixing colors through various percentages of CMYK, a pre-mixed ink of one color (using the Pantone Matching System to select from swatches) is applied via a printing press – often used in business cards and letterheads. Pantone colors can also be used to match colors when printing on trinkets and merch when CMYK is not available or practical. PMS numbers are a universal, industry standard formula so all vendors and designers will know exactly what color you’re referring to when you tell them a particular PMS value as opposed to “the dark royal blue in the corner of this photograph.”

What palette for where?

A simple rule of thumb is this – RGB is for monitors, CMYK and spot colors are for print. I’ll say that again – RGB is for monitors, CMYK and spot colors are for print. To confuse matters a little here, you can view CMYK colors on electronic documents with your tablet, smartphone or tablet – PDFs for example – but keep this in mind: those colors are estimations and only approximate what that color will look like if printed. It is not absolute (though color matching technology has improved dramatically over the years) and even to this day, how these color appear can vary widely depending on what device you’re using, and even what angle your monitor is set at. The goal here is to make sure your colors are predicable and match, regardless of where your logo is being used.

How it works.

If a color is on your monitor, smartphone or tablet it is in an RGB mode.

Period.

That includes images from websites, logos you’ve found on Google and photographs you’ve taken with your smart phone. The image colors are made up of sliding percentages of red, green and blue and has light passing through it for vibrancy. The brighter the color, the more light is passing through (this is very important to remember for later.) Let’s take a look at a hot pink and how this translates to RGB, using screen grabs of an Adobe Illustrator color picker (whatever color tool you’re using may look different, but the concept is the same):RGB-color-paletteOur pink is composed of the following RGB formula (inside black box) where 255 is maximum intensity:
R: 236,
G: 0,
B: 139.
This color also has a CMYK breakdown too:CMYK-color-paletteWhere 100% is the maximum amount of ink coverage, our pink is made up of
Cyan: 1%,
Magenta: 99%,
Yellow: 1% and
Black: 0% .
How you view printed CMYK colors is different than RGB colors on an electronic device because instead of light passing through them, CMYK colors are viewed by light bouncing off them (keep this in mind for later too.) There’s another critical component of color matching and that’s the HEX (hexadecimal) value of our pink. A HEX color value is a six number and/or letter combination, preceded by a hash (#) and is used in HTML, CSS, SVG, and other computing applications to represent colors. It is an absolute number and will match precisely on anything to do with websites or electronic devices. In the case of the pink we’ve been using, here’s where that is:Hexadecimal-color-paletteThe hexadecimal value of our color is #EC008B and anywhere we plug that value into, we can be assured that the pink will look just like it’s supposed to. What about a Pantone match? Well, if we were dutiful in our color picking, we would have started with a Pantone match from the swatches in our software. Like so:pantone-swatch-guideAlas, in a typical logo design process, colors can be tugged, pulled and shifted around – the client will want a brighter or richer hue – and we often stray from our starting point. Designers often match these adjusted colors by eye (using color swatches in a physical guide) or use online tools that will reverse engineer a Pantone color using the hexadecimal value. This is a very good one. When we plug our hex value into the interface, it spits out “close as” Pantone matches. Like so:matching-Pantone-to-RGBThere are a couple of variables here but the one we’re going to pay most attention to is the Pantone Solid Coated (how the color will appear on coated or shiny stock.) In our example the value is Pantone Solid Coated 225 C (the other Pantone matches are for uncoated stock, metallic and neon inks that while important in their own right, aren’t applicable here) and we can plug this PMS value into our Pantone swatch library. Like so:pantone-color-swatch-matchingAnd there you have it. We have RGB, CMYK, Hexadecimal and Pantone color formulas for our nice pink and we can reproduce the color with pretty precise accuracy all around, be in on the web, in print or on branded merchandise. This would be a foolproof method if all colors can be treated in this way.

Alas, they can’t.

You can’t get there from here.

If you find a color on the Internet that you like, a designer can always add it to your logo and it will appear the same way.

On the Internet.

Where it goes a little haywire is when the color can’t be matched in the real world. And sometimes that happens. If I had a nickel for every time an exasperated client told me a variation of –

“I don’t understand it. If I can see the color on my phone/tablet or monitor. Why can’t it be printed?!”

– I’d have a lot of nickels. It just so happens there are times when a color can’t be matched in the real world, due to something known as luminance. Remember that a color on a monitor is created by light passing through it and a CMYK (or Pantone) color is created when light bounces off it? That can cause you a lot of grief if you don’t understand what’s going on. Let’s try and break it down.

Hot RGB colors.

This color seems to pop up a lot so we’re going to use this hot blue as an example of “you can’t get there from here.”Hot-RGB-color-paletteMany clients seem to like this color because it’s vibrant, bright and probably looks okay on hot monitors (particularly Windows machines.) The thing that makes this color so vibrant is the amount of light passing through it, an effect that simply cannot be duplicated using print colors where the light is being bounced off. Let’s do the exercise (we’ll bypass the RGB and hexadecimal portion because we can match this for web and electronic devices without issue.) If we work with the CMYK mixes for this color, it’s a different blue entirely:Hot-RGB-color-to-CMYK-paletteEven then, it’s a best guess by whatever design software you’re using. There is no Pantone swatch to start off with, so let’s plug our hex value into the handy-dandy web tool we used earlier:matching-Pantone-to-hot-RGBAll over the place. That color will never look the same way on your business card as it does on a website because it requires light passing through it to work. You cannot expect the color to be as vibrant in your brochure as it is on your social media avatar and no amount of yelling at your designer is going to change that. It’s why you should start with colors that are in the neighborhood of a Pantone value and if you’re going to pick colors from an image on the Internet, do so with extreme caution and even then, be prepared for disappointment if it can’t be matched. Sometimes you simply can’t get there – color wise anyway – from here.