4 color systems that every brand should use
If you’re a small business owner DIY-ing your visual branding (your logo, website, business cards, social media graphics and more) or if you’re working with (or have worked) with a professional designer, it’s important to be familiar with some “designer lingo” from time to time. Have you ever heard someone reference “RGB” or “Hexadecimal” before and wondered, “what the heck is that?” You’re not alone. When it comes to design, understanding how colors work and effect a design in many ways is crucial. And, understanding that you need to design within specific color modes within specific platforms, in order for your design to be of the best quality and setup professionally, is even more crucial.
The short and sweet of it is this — you must design using a different color system for print than you do for digital. If you’re preparing files to send to a printer (let’s say, your business cards, a brochure, or a banner) they will need to be “CMYK-compatible” for best results. Or, if you’re developing your website or designing a graphic for your blog or Instagram (images that will only be viewed on a screen, digitally) you’ll need to use the “RGB” format or even a “hexadecimal” code.
Are you still confused?
That’s OK. Let me break it down for you! After all, I’m all about keeping things as simple as possible. Keep this information handy the next time that you’re creating on-brand graphics or working with your designer. (They will appreciate you knowing these things!)
RGB stands for red, green, and blue, which are the three additive primary colors. We use this system when designing something to be displayed digitally (think websites and social media graphics), but not to be printed.
CMYK stands for cyan, magenta, yellow and black. This system is used in 4-color print processing, as these four are the standard inks for producing colors. When a file is sent to print, it must be setup in CMYK mode.
PMS: The Pantone Matching System is a universal color matching system, also used in printing. Pantone colors are specific swatches that are already pre-mixed. So, if you use these colors in your design, they’ll print the same every time. This is important when you’re dealing with brand colors that need to be exact. A CMYK-based blue might print lighter or darker depending on the printer, but a Pantone-based blue should print the same from one printer to the next.
Hexadecimal: I’ve never been a math whiz, so this one can be a little tricky. Although I don’t even (always) understand how the numbers work, this is a color code that you can use when developing a website and when you’re utilizing HTML or CSS code. Within this color system, digits (in pairs) indicate the red, green and blue components in the RGB system, mentioned above. The code uses sixteen distinct symbols and when working within CSS, the symbols “0–9” represent values zero to nine, while “A, B, C, D, E, F” represent values ten to fifteen.
So, you can represent 16 values with one hexadecimal. And, with two hexadecimals, you can represent 16x16 values (which = 256 values.)
RBG looks like this: R=0-255,G=0-255,B=0-255
So, 3 pairs of Hexadecimal symbols are used.
For example: Hexadecimal code: #fefafd is RGB: 254,250,253.
Why? Because: fe=254 (which is red), fa=250 (which is green) and fd=253 (which is blue.)
(Again, don’t stress too much about this one. It’s handy when working with a web developer, but I think it’s important to understand RGB first. If you’re formatting a DIY website, you can often enter the RGB code for one of your colors and it will also display the Hexadecimal code, so you can just copy/paste it to use it elsewhere, if need be. That’s what I do!)
Now that you have a little better understanding of when and why to use RGB, CMYK, PMS and Hexadecimal color systems within print + digital platforms, you might be wondering HOW to make sure that you have the systems “turned on” and correctly in use. I’m going to breakdown how to set this up in Adobe InDesign + Photoshop (the programs that you should be using to either design materials for print or digital platforms.)
Adobe InDesign: First, use this program for anything that you need to lay out and that will be printed (again, business cards, postcards, annual reports, booklets + more). Secondly, remember that you need to design these soon-to-be-printed materials in CMYK mode. To do this, open your “Swatches” palette. Click on the upper right-hand drop-down menu and select “Ink Manager.” If you’re using CMYK colors, the four of them should appear in a little window: “Process Cyan, Process Magenta, Process Yellow, Process Black.” You should also see CMYK values for each swatch in the palette (unless you’re using PMS spot colors, which is totally acceptable!) However, if any appear to be showing RGB values, simply double-click on the swatch, click on “Color Mode” and select “CMYK.” Before you export a PDF for printing, make sure that ALL of your swatches are setup in CMYK (or PMS options/spot colors.) Either CMYK and/or PMS (Pantone) is what you want your swatches set in before finalizing your design document.
Speaking of PMS swatches, where do you find those, you might be thinking? Simply go back to your “Swatches” palette, click again on the upper right-hand drop-down menu, select “New Color Swatch” and you’ll see multiple Pantone options to choose from. If a designer setup your brand colors via the PMS, ask them to provide you with the swatches. Then, simply add those exact ones to your swatch palette.
*Extra notes: Remember, when exporting your PDF for printing, select either the “Press Quality” or “High Quality Print” option under the “General” tab. Also, make sure that you choose “Maximum” image quality under the “Compression” tab. Finally, don’t forget any necessary bleed or crop marks if your design goes off the edges and the document is a certain size that will require trimming.
Adobe Photoshop: I create my digital brand graphics (for social media, my blog, etc.) in Photoshop. It may also be easier to use Canva. But, in Photoshop, once you create the image, simply go to “Image” (in the top menu) → then “Mode” and select “RGB Color.” In another instance, if you are formatting an image that is going to be printed for some reason (like a logo on a sign) you would choose “CMYK Color.” Are you getting the hang of it, now?
Keep in mind that if you do have a question, simply type in a keyword (like RGB or CMYK) in the search bar under the “Help” tab in the navigation menu at the top of your window (in both Photoshop and InDesign.)