"Everything that you can see in the world around you presents itself to your eyes only as an arrangement of patches of different colours" - John Ruskin
The colours used in design are almost, if not equally as important as the visual itself. They trigger the human mind to form some type of feeling, generate a form of emotion or express an idea or message - and this is just the first impression (and we all know these count for everything). Whether you're a graphic designer new to the job, a long-standing member of the creative industry, or you're just someone who's looking for a more in-depth understanding on artwork and colours - knowing and remembering the differences between RGB and CMYK colour modes and files could save you a creative catastrophe during the design process. Knowing what each letter stands for won't quite be enough this time around, which is why we're going to briefly explain the differences below.
So what exactly are RGB & CMYK?
In a nutshell, they are forms of colour mixing in both digital and print design. The key is to know which is the best choice for the type of work you are doing: RGB is typically used for digital work onscreen and CMYK is the breakdown of colours used for printed products.
Red, Green, Blue (RGB) in other words, relate to the colour of light within a device and when mixed to various intensities, create the colours you see on the screen now in front of you. When these three colours are equally mixed onscreen, you will see pure white.
Remember: whether it's a photo, button, advert, icon or infographic - if its final usage is on a screen, then make sure the colour mode is set to RGB in whatever software you are using.
When to use RGB:
RGB colours appear much more vibrant than CMYK and this is because they are illuminated by the screen on which they appear. This colour-way will need to be used in anything that is to be displayed on any type of device/screen such as a mobile, laptop, television screen to even our smartwatches. For example:
- Website design or any elements to be used on the website itself such as buttons and icons,
- Animations and video,
- Presentations to be shown on screen including any infographics,
- Game and app design,
- Social media content - profile pictures, backgrounds.
Recommended RGB file formats:
- JPEG: These files are readable practically anywhere and are usually of a manageable size. Great for photos and previews.
- GIF: These files capture motion so are great for any type of animated elements such as visuals for social media or animated logos.
- PNG: This file type supports transparency so are great for elements such as banners and buttons to be used on a web page.
Do these stand for another bunch of colours, we hear you ask? The answer is yes of course; Cyan, Magenta, Yellow and Key (or Black to you and me). Printers use different amounts of inks in layers to create the desired final colour of the artwork. From business cards and envelope stickers to vehicle wraps and billboards, no matter how big or small, the artwork for these should always be set to CMYK. The best file types to support CMYK are usually PDF's, but always check with your printer just to be sure.
For a more detailed breakdown on what else to check before printing, read our article: Sending artwork to print.
When to use CMYK:
CMYK (or the 4 colour process as its also known) refers to the physical layering of inks on a page to create the desired colours and should be used for printed materials only, for example:
- Branded items and merchandise, such as business cards and stationery, promotional items and branded clothing to larger elements, like storefront signage.
- Advertising materials including flyers and posters, brochures and catalogues, up to roadside billboards.
- Product packaging
Recommended CMYK file formats:
- PDF: These are compatible with most systems and will be most likely the file type your printer will request from you. (Always check with your printer to be sure).
- EPS & AI files: These are both standard file types for vector images with .eps files being compatible with other vector programs.
Knowing the best colour modes for specific work will make your life much easier when it comes to understanding the colour differences between a logo on a website versus a logo printed on product packaging. Not only that, but should you want the best possible match both on-screen and off, knowing how the colours work together and the processes behind the scenes means you should be able to get pixel-perfect results every time.
Need some help or advice?
We can help you through every step of the journey, whether it's your branding & logo design, graphic design or website design. We've got you covered!