Colours for print and web explained! Colours for branding can be confusing, especially to someone who isn’t a designer, web developer or professional printer. “Why do I even need to know this?” I’ve had clients ask me. I agree, it’s not something you need to keep your business running, but it IS something you need to keep your brand running.
Your brand (ie. not just your logo) presents your business to the world and you want it to look trustworthy, professional and desirable. A big part of that requires keeping your brand consistent. You need to always use the same typefaces, logos and colours that you and your designer laid out in your Brand Style Guide. The more you stick to your brand, the more trust you build with your audience. They’ll know what to expect from your brand and can see that you’ve got yourself together. This is comforting to them and when people are comfortable with a brand, they’re loyal to it.
Long story short, know your colours and you’ll be one step closer to a beautifully consistent brand.
Now let’s break colours down into bite sized pantones…(design joke)
Basics
Every colour* will have a CMYK, RGB and Hex value. But not every colour will have a PMS value.
*doesn’t necessarily apply to specialty “colours” like metallics, gradients etc.
CMYK – Print
CMYK stands for Cyan (C) – Magenta (M) – Yellow (Y) – Black (K). This is a process of printing using varying levels of the 4 aforementioned colours and the majority of the world’s printing uses CMYK. Most printer ink comes in those 4 colours. It’s used for digital printing and a lot of publishing. If you have a CMYK colour, you can also easily determine the equivalent RGB and Hex colours. Most printers will ask for things like advertisements, brochures, business cards and posters to be provided in CMYK format. However be aware that digitally printing a CMYK poster at one print shop may not look the same when it’s printed at another. Be prepared for some slight variance in your print materials when printing digital or CMYK.
HSB stands for Hue – Saturation – Brightness and is based on the way humans see colour. This isn’t likely something you’ll need to know for business branding.
Pantone or PMS – Print
PMS stands for Pantone Matching System. Think of this like a universally standardized colour matching and reproduction system. If your brand colours are matched to PMS colours, any professional print shop in the world will reproduce that colour the exact same way. It’s a great system for keeping your colours on brand if you’re ordering a lot of quality print materials (ie. offset printing). However, it’s not as useful if the majority of your print materials are digitally printed (see CMYK above). There’s also not as many options if you stick to Pantone colours only. Discuss with your designer whether it’s really necessary to base your brand colours off the Pantone Matching System.
Tip: If you’re wanting things to match your brand colours like paint and fabric, get some colour swatches to match everything to.
RGB – Photography / Screens
RGB stands for Red (R) – Green (G) – Blue (B). Similar to CMYK, RGB colours are created using varying levels of the 3 aforementioned colours. RGB colours are used for screen-viewing devices, but also for photography. If you get professional photos taken for your business, the photo files will be provided in RGB. Even the photos you take with your smartphone are also in RGB.
Some common confusion: Say you have an advertisement that includes a photo with a little bit of text on it. Do you provide it in RGB or CMYK? Depends on the final production and the printer. Usually it’ll be CMYK, but every printer is different. They’ll let you know what they need and you can then advise your designer on what file format to provide.
HEX or # – Web
HEX colours look like this: #007298. These are colour codes for web use, and knowing your Hex codes is quite handy if you create your own email marketing templates, website pages or blog posts. It’s also important to provide them to anyone creating digital media for you. Web developers / designers will use these codes for HTML and CSS. Every Hex colour will “technically” look the same on the web. There will always be discrepancies due to the varying quality and brightness of screens that viewers will be viewing your media on. In the end, just be consistent with the hex codes you use for your brand and that’s the best you can do.
Note: HEX codes can have letters as well as numbers. It doesn’t matter if the letters are caps or lowercase, they’ll create the same colour.
So what if you have a Hex colour, but need the CMYK or RGB code? Or vice versa? And you haven’t gotten a Brand Style Guide created or your designer is away on vacation? Don’t panic…
There’s an app for that. Click here!
I hope that helps you figure out which colour codes you need for what and when. If you have any questions, you’re always welcome to contact me.
