Why does my design look different on screen than on print?

RGB vs CMYK 

The most basic design fundamental knowledge that you’ll need to know is this: The primary colours you learnt back in your early years, are different in the digital world. Printing also calls them differently. You will see these two acronyms show up a lot when trying to design: RGB and CMYK.
  • RGB = Red, Green, Blue
  • CMYK = Cyan, Magenta, Yellow, Black
How does this answer the question? Your screen emits light and mixes this to create colours but they use Red, Green, and Blue. When comparing it to printers who create colours by mixing ink (Cyan, Magenta, Yellow, and Black), this becomes a completely different set of colours. The printers have to combine the ink to try and replicate what you created by mixing light. As you can imagine, adding light makes the colour closer to white but adding ink together makes the colour closer to black. In technical terms, RGB colours are considered Additive whilst CMYK colours are considered Subtractive.
 
additive colours
subtractive colours

Design Colour Modes

The closest way that a designer can see what their artwork looks like during printing, is by setting the colour mode to CMYK. The Adobe software usually prompts you for your colour mode at the very beginning when you create your new file so don’t just click ok! If you already went past that little prompt, or trying to convert a current file, those settings are usually changeable; just find out where to change colour modes in the software. You’ll notice some of the colours might look a little faded when you are in CMYK mode. This happens especially to neons and metallics because it is very difficult for a printer to replicate lighting effects when all they have is ink. 

Pantone System

For printers to match closely with digital colours, the Pantone system was created. Pantone colours are designed to help the designer and the printer choose the best outcome for their artwork. Pantone books normally have different shades of colours and will have the CMYK values written under each colour to help the printer mix their ink. If you’re designing digital logos for a client (or even if you are the client yourself), make sure to check that your chosen RGB colours have the CMYK values, or the closest Pantone colours as you will often print a logo design as well. The Pantone system isn’t a colour mode, but rather a system that helps printers match the values that are on the CMYK colour mode.

wedding booklet printing
hex codes

The Color (Colour) Picker

If you’ve worked with images, chances are you’ve seen this window in a few different types of software. It’s called the color picker (digital software are usually written in American English) and it does exactly that; picks your colours. You’ll notice that when you change the colours, the numbers will also change. And, if you’ve been reading this article so far, then some of the numbers might start to make sense. Can you see RGB and CMYK number values?

HEX Codes

HEX is short for hexidecimal which (like Pantone does for CMYK) helps translate RGB values into web. It is usually comprised of six different characters (numbers or letters) and start with a hashtag (#). You’ll notice web designers and developers use this value more often. You can still use RGB values in web, but hex codes are shorter versions. So, if you want your brand colours to match completely across all your digital platforms, make sure that you record the HEX code as well.

If this article helped you or you simply want an expert advice on this topic, feel free to send our team a message to hello@e-studios.com.au
motion designer

Jozzelle De Jesus
B(Int)Entertainment

1st February, 2022

Looking for animation services?