We got to the final part of the Brand Colors blog post series. You’ve already learned about the emotions that colors can trigger and the 4 easy steps to build your unique brand color palette.
In this last blog post you’ll learn about color codes and how they can help you get the best result when using your brand colors.
MY COLOR NIGHTMARE
But first, story time:
During my early years as a designer colors often gave me a headache… Not the kind of headache that you get when staring at a strong magenta too long.
No, color just didn’t want to co-operate with me.
Something that looked awesome on screen, printed as a bowl of grey porridge on paper. A color I loved on my laptop was a vivid, neon mess on the fancy iMac screen in my first designer job.
So if your beautiful marketing collaterals that you designed in Canva print badly and make you want to curl up and weep, I totally get you girl… Colors and printers hated me too…
Well, up until I met someone who was even more obsessed with colors than me: my ex-boss, Brian. I can’t say that I loved those late hours leaning over Pantone books and printed sheets of packaging labels, staring at them until my eyeballs wanted to scream, jump out and run away. But I definitely learned what made a color work.
I finally understood color systems and when to use each color codes.
Now let’s save you some time. Instead of going through this journey on your own, here are my key takeaways from those late-night workhours.
WHAT ARE COLOR SYSTEMS
I’m going to cover the 4 ways we most often describe colors in graphic design work. There are much more ways to describe colors (e.g. artists using paint mix their colors completely differently than a graphic designer). For graphic work you only need to know about these 4 ways.
RGB
RGB is an additive color system in which Red, Green and Blue light are added together to create all the different colors.
Red mixed with Green makes Yellow
Green mixed with Blue makes Cyan
Blue mixed with Red makes Magenta
All three lights mixed together makes White
The most common version is the 8-bit version, where each main color can have values between 0 and 255. These values are the RGB color codes of that particular color. If everything is 0, you’ll get black (because we don’t use any light), if every code is 255, you’ll get white, because you mix all 3 lights.
We use this system in electronic devices: TV and computer screens, smart phone LED and LCD screens, etc. So everything you see on your phone (like this article) is made up of Red, Green and Blue light.
You must use the RGB color system when you plan to post your design digitally and don’t want to print it, for example: on your website colors, your Instagram graphics, your Facebook ads.
If you open any design apps or tools (e.g. Photoshop), you can set up your document to use the RGB color system.
HEX
Hex is actually not a color system. It’s short for “hexadecimal” and it’s another way to describe RGB color codes. Instead of listing the three RGB codes you can use this 6-digit long code to describe your color. It’s easier to copy the code this way so HEX is often used in design apps, like Canva and also in web design.
Canva uses HEX codes:
CMYK
CMYK is a subtractive color model and stands for Cyan, Magenta, Yellow and Black. Does this sound familiar? Of course, these are the colors you purchase for your printer. So instead of light, here we mix inks:
Yellow mixed with Cyan makes Green
Cyan mixed with Magenta makes Blue
Magenta mixed with Yellow makes Red
All three colors mixed together makes Dark Grey
The black is added because the 3 colors mixed together can only create a dark grey, not a rich black – hence we need this extra ink for the best result.
As for the CMYK color codes, we value them from 0 to 100%. If all colors are at 0%, that means that we don’t use ink, so the paper stays white. If all values are 100%, we use all 4 colors fully, so that part will be black.
All digital printers, even big volume manufacturing uses CMYK to create colorful printed products (e.g. packaging, magazines, etc.).
Why does your design look more greyish in CMYK than with RGB?
Mixing light (RGB) will always create more vibrant colors than mixing ink (CMYK), simply because inks are not as clear and vibrant as light. Luckily, you can set up your Photoshop, Illustrator, etc. files to imitate the CMYK printed result. This way you’ll see how the file will actually print while you’re working on it and you’ll avoid any unwanted surprise.
This is why it’s very important to set up your file in CMYK if you plan to print it.
It’s also helpful to import files in CMYK format into your design tool.
For example, if you plan to make business cards, and you want to include your photo on the back, you must make sure that not just your business card designs, but the photo is in CMYK mode too. Photos are taken in RGB so you might have to change the color mode. This can be done very easily in Photoshop:
You can also let your design tool export into a CMYK format. For example, when I send a business card design to MOO, they recommend using the PDF/X-1a:2001 preset and Coated GRACoL 2006 output destination. You can set this up when you save into PDF format in Illustrator, Photoshop or InDesgin:
Always check with the printing company regarding the file setup they need for optimal results. If you know this in advance, you can avoid color altering issues later on.
PANTONE MATCHING SYSTEM (PMS)
Last but not least, let’s talk about Pantone. You might have heard about them, because each year, this company announces the “Color of the year” which then becomes a signature color in fashion, home décor, graphic design, etc. (This year, it’s Living Coral 16-1546)
Pantone defined the Pantone Matching System (PMS), to allow designers to "color match" specific colors when a design enters production stage, regardless of the equipment used to produce the color. This system has been widely adopted by graphic designers and reproduction and printing houses.
PMS colors are almost always used in branding and have even found their way into government legislation and military standards (to describe the colors of flags and seals).
The Pantone system has 1114 colors which are mixed from 14 base pigments (including black). We refer to these colors with a specific code, e.g. PMS 130.
You can get these codes from Pantone books, the primary product of this company – however it’s a very pricy investment to own these books as one can cost you $150+ and you might have to re-order them after a few years. They tend to get slightly yellow over time.
If you plan to buy one for printing, digital and branding purposes, I recommend getting the Formula Guide Coated & Uncoated first. This is what I used the most in my design work.
Some of these books also list the CMYK equivalent of each Pantone color, but you must know that not every PMS can be mixed from CMYK inks.
Many clients asked me whether they need to define their colors in Pantone or not. I think it never hurts to know your brand colors in Pantone – if there are Pantone color for them. But what matters is how you’ll going to use your brand colors.
Most of you won’t need to print with Pantone inks ever. Why? Because it’s super expensive.
Most of the digital printers (e.g. Moo, Vista) doesn’t even offer this option for you, because printing with Pantone only worth it for huge volume - like multiple thousands of printed products.
In my career the only time I really had to send a design with Pantone codes was when we manufactured thousands of packaging in China, and it was a higher end product where the color consistency of packaging counted more than the extra cost of using dedicated Pantone colors.
Also note that printers can’t print with only Pantone. They are set up to print most of the design in CMYK and then print 1-3 dedicated colors with the Pantone defined inks. So if your artwork has photography, illustration, anything detailed and gradient, you won’t be able to print it with Pantone defined inks. You can only use it if you have 1-3 homogeneous colors in you design.
WRITE DOWN YOUR CODES
No matter what’s your project going to be, mostly digital, printed, small or big volume, what’s important is to have your color codes at hand.
Make sure, you create a guide where you list all your colors with their RGB, HEX, CMYK and even Pantone codes (if applicable). Save it as a PDF and make it available for every team member so they create content with the right colors.
You can get your color codes in many ways.
GET YOUR COLOR CODES IN ADOBE PHOTOSHOP OR ILLUSTRATOR
If you made your color palette in any Adobe design tools, open up the color picker tool and take the codes from there.
GET YOUR COLOR CODES IN CANVA & ADOBE COLOR
If you designed your palette in Canva, copy the HEX code of the colors. Then go to Adobe Color, paste in your HEX codes to get the RGB and CMYK equivalents.
GET YOUR COLOR CODES FROM PANTONE BOOKS
If you decided to use Pantone colors, the best way is to get your Pantone color codes from a Pantone Book (ask a designer friend if you don’t want to purchase one for yourself). Then, you can use the conversion in the book to get the CMYK equivalents or head over to the Pantone website where you can also find them.
I hope this blog series helped you understand colors a bit more and gave you inspiration, too. As always, I’m ready for any questions, so share them in the comments.
