Hex, CMYK, Pantone – What's The Difference In Color Code Systems?

Know the medium

The trick is to ask yourself — will this be displayed on a screen, or printed on something? 

The color code system you need depends on your answer, for a simple reason: displaying colors digitally on a screen (e.g. hex) works differently than creating color in print (e.g. CYMK or Pantone).

For this reason, your company brand guide may include different codes in hex, CYMK, and Pantone for the same brand color. This is important for brand consistency. If you have all this information, you’re all set to go (if not, don’t worry — get in touch with our designers for help.)

It’s important to use the right color code in the right situation for that perfect look and build brand identity. Let’s get into the details.

Hex

Hex is the most popular digital color profile and is often used in web development. You’ll frequently see this color code expressed with a # before a combination of six seemingly random letters and numbers. For example:

• #000000 is black
• #FFFFFF is white

Of course, hex combinations of letters and numbers aren’t actually random. Instead, the combination defines the mix of red, green, and blue (RGB) in a way that the computer can understand. 

Note that the absence of color is black while mixing all colors results in white. This is because RGB follows a color additive model — you start off with no color (think black screen) and as you add color, you get closer to white.

Takeaway: When creating graphics or anything that will be viewed on a display for your brand, you’ll want to work in hex. 

So what about when you want to print?

CYMK

While hex is used for screens, CYMK is commonly used for printing or digital print such as a sticker, custom box and insert cards use this method. You might even recall seeing these four letters on an inkjet printer — CMYK stands for Cyan, Magenta, Yellow, and Key (usually Black). Like hex, the four-color process also uses a combination of colors to create color, but unlike hex, CYMK uses a subtractive model. 

Think of it like starting off with a white canvas, and as you add more color, you get darker and muddier colors. CYMK is expressed in percentages of each color, e.g. blue could be expressed as 100% Cyan, 100% Magenta, 0% Yellow, 0% Key.

Note that unlike hex, using 100% of each of the four colors doesn’t get you the darkest black possible. To get an accurate idea of what your design will look like, make sure the colors that will be used to print match the CYMK values of your brand colors. If your design was created with an RGB (Hex) color profile, it may look different once printed. To solve this, you’ll want to convert the color profile to CYMK before printing.

Takeaway: When creating something for print, whether that’s a flyer or a sticker, you’ll want to use a color profile suited for printing (e.g. CYMK) over a color profile for the web (e.g. RGB/Hex).

Pantone (PMS)

Pantone, or the Pantone Matching System (PMS), is a proprietary color system that can take your brand to the next level if brand consistency is important to you — this is because Pantone colors are extremely accurate in creating a specific color, hence the name ‘Pantone Matching System.’ It’s commonly used for screenprints on items such as apparel, water bottles and notebooks. 

While Pantone is also used for printing, it’s fundamentally different than using CYMK. Rather than creating color through a mix of percentages, Pantone colors use thirteen base pigments that produce a catalog of colors under the Pantone brand, indicated by their unique number. 

For example, Pantone's Color of 2020 is PANTONE 19-4052 Classic Blue. The unique numbers of predetermined Pantone colors help printers maintain color consistency, although it can be potentially more costly.

Takeaway: If consistent branding and logos are important, use Pantone. If your print job doesn’t require a specific shade of color, then CYMK may be better depending on your budget.

Create the perfect Swag for your brand

That’s it! Now you know what color codes to use when. Check out our preset packs for ideas, or get started with a free design mockup of your perfect swag pack/bulk order using our pack builder. 

You’ll be able to review proofs in your SwagUp dashboard and make sure your swag comes out exactly as you imagined it. #TotheMoon! 🚀

Get Started With SwagUp Here! 🚀