Let’s say you’ve chosen a nice minty green as one of your brand colors. When it prints, it's beautiful! But when you see it on the web, it's fluorescent green and makes you see double! The color is drastically different in print versus online. What’s going on?
The reason why this happens is that the designer forgot (or didn't know) that file formats and color breakdowns will be different depending on where your art is used. Having accurate color breakdown codes for each medium is absolutely critical to ensure that your brand is consistent and that your art looks the same no matter where it lives.
There are many systems to make sure your colors transfer properly, but here are the ones I've found to be the most common:
PMS - Pantone Matching System
This is the most widely used coding system and the one that most printers understand. The Pantone company produces small color swatches on different types of paper and applies a number to each one. This way, when you want to use PMS 201C, you can mention that to the printer and they will do their best to calibrate their print machines to match that specific chip. They always have a set of PMS swatch books at their fingertips. As an example, a bright red is Pantone Bright Red C.
CMYK - Cyan, Magenta, Yellow, Black
These are the four ink colors you use in your at-home inkjet printer (or in your office laser printer). We learned about these as young kids in school. Mixing just the right amount of each of these ink colors will produce your desired color in printed materials. These four numbers relate to the Pantone Matching System above, but are not as specific to the type of paper (i.e., coated vs. uncoated) or material you need to print on. An example looks like this: 0-99-100-0.
RGB - Red, Green, Blue
Instead of ink, these letters stand for the three main lightwaves of color: red, blue, and green. Remember learning this in science class as a kid?! Little did I know WAY back then that they would play such an important role in my design career. These codes translate to what you see on screens like your computer, tablet, or TV. As an example: RGB (255, 0, 0) is a very bright red.
HEX - Hexidecimal
HEX colors are basically the same as RGB colors with lightwaves, except they are a little more robust. Hexa means six and decimal means ten, which stands for the base 16 number system. This allows for a wider range of numbers (and therefore colors) to use on your website than an RGB set of values. HEX codes are used in HTML, CSS, SVG, and other computing applications to represent colors.
There's not too much of a difference between using a hexadecimal or RGB color, except that in CSS (Cascading Style Sheets), it's possible to also add an alpha value, so you'll really have an RGBA color. This can be super helpful if you want to control the opacity of a color. CSS is the language for describing the presentation of web pages, including colors, layout, and fonts. We can input them for one page and it will show up on all the pages in the same way.
The bright red I have referenced as an example would look like this: #ff0000
How do you find all these color values?
Photoshop or any other Creative Suite digital software allows me to pull these color breakdowns easily. When we work together, I will put all of your color breakdowns on one page in your brand style guide so that you can easily reference them or share with another print or web vendor.
While there are many other color matching systems out there to help keep that mint green exactly how you want it to look, these are the basics! I'd be happy to help find the values of each to work for you and your brand identity design.
