Understanding Colors in Graphic Design
Have you ever noticed that something on your computer monitor appears one color, yet your coworker’s monitor seems to display the same thing in a slightly different color?
That’s because each monitor has its own individual color calibration, mode, and video processor. Same rule applies to designing materials viewed on a screen versus materials viewed on printed pieces.
So…double the trouble or double the fun?
Well, hopefully the latter if you get your system set up right from the get go!
A good rule of thumb is to think about who your audience is and how the design is going to be received. If it’s purely digital, then you want to focus on color outputs for on-screen. If it’s purely print, then you want to focus on color outputs for offscreen. If it’s a design that will appear on both, knowing how to optimize the color for the designated output will ensure that your color looks exactly the way you envisioned.
On-screen (RGB)
When designing for onscreen, such as a website or an app, you’re likely working with a screen. On-screen colors are broken down into three main colors:
Red, green, and blue, also known as RGB.
Every single color that you see on a screen comes from a blend of those three colors. RGB is an additive color model, which means when you add different values of red, green, and blue light, you get other colors. No RGB at all? You get black. 100% of RGB? You get white.
A tricky thing about RGB is that because there is already light being emitted from your monitor, the vibrancy you see on your screen is not what you see in print. That’s when it’s time to use CMYK!
Print (CMYK)
CMYK color refers to a combination of four ink colors:
Cyan, magenta, yellow, and black.
When you look at a CMYK printed piece through a microscope or magnifying glass, you can see the pattern made by the CMYK dots and how they overlap to create the final color. Unlike RGB, CMYK is a subtractive model – where the colors are created when white light is subtracted from the RGB colors. CMYK gets its name because:
White – red = cyan
White – green = magenta
White – blue = yellow
When you use all the colors together, you end up with black. However, it’s not a true black, which is why there’s a fourth color in CMYK – the key, which is a pure black. And there you have it – four colors for CMYK!
Okay, now that we’ve established the onscreen and offscreen color models, let’s talk about HEX and Pantone.
Pantone® Matching System
The Pantone® Matching System (PMS) has been around for more than 50 years. They created a universal color language, which made it easier for printing companies around the world to match colors and ensure consistency. Unlike CMYK printing where the dots overlap to create a color, PMS is a solid color throughout. This way, there’s no chance of it appearing differently due to how the ink prints. With nearly 2,000 solid PMS colors to choose from, these are often used in branding materials because it will always appear the same, regardless of who does the printing.
Hex Code
And perhaps the simplest color system of all: hexadecimal colors – aka hex. These are a six-digit combination of letters and numbers defined by its mix of red, green, and blue – because it’s purely used for web design – harkening back to our friend, RGB. What’s neat about hex colors is that they have sixteen different values to represent a single shade of color, whether it is red, green, or blue. That means there are nearly 17 million color combinations to choose from. Think that’s enough?
Now that we know which color model to use, we can make the most of our design process! Add in the internet and Adobe applications, it’s easier than ever to convert CMYK to RGB or RGB to hex or hex to PMS. The possibilities are endless!
Sources:
https://negliadesign.com/ask-a-designer/whats-the-difference-between-pms-cmyk-rgb-and-hex/
https://www.jdsupra.com/legalnews/from-monitor-to-paper-why-colors-change-83401/
https://www.logobee.com/logo-design-blog/post/why-do-colors-look-different-between-monitor-and-print
https://en.wikipedia.org/wiki/CMYK_color_model
PIN ME!
