COLOUR MODE. RGB? CMYK? PMS? WTF???
What is a colour mode? Well, have you ever had somebody start listing the alphabet in random order around you? They may be talking about different agencies or companies, but if you are talking to a designer, they are most likely referring to a colour mode. As such, here are the most important things you should know when working with a designer to get your brand (or any graphics) created for either print or digital.
One of those is to remember that if you have a print product that is created digitally, you need to be very careful about your final colours. Unfortunately, digital proofs are very hard to compare unless your computer monitor has been properly calibrated.
In this article, we will be breaking down each of the four colour modes mentioned above (no, WTF is not a colour mode that I am aware of) as well as give honourable mentions to a few other modes and how to utilize them.
RGB COLOUR MODE
RGB stands for Red, Green, Blue. Think of your primary colours from pre-school and finger painting. You have access to these three colours to create a large number of other colours. Similar to finger painting, this is an additive colour mode, where you have to combine the values of these three primary colours in order to create new ones.
Unlike finger painting, though, the RGB colour mode is based on light. This means that when you combine red and green in paints, you get brown. In the digital format, the combination of these two colours actually creates yellow.
I want you to always think in reverse when it comes to creating colours in the RGB colour mode by removing pigments when creating new colours. The higher values you add together the brighter it comes. As we are talking in digital and the addition of light, that means that the combination of the three primary colours in this mode creates white.
Technically, what I want you to think about when you hear RGB is DIGITAL. RGB is used for monitors, TVs, digital cameras, and even some old-school printers. For the purpose of the modern age and technology, we are going to stay away from the printers for the moment and focus on digital.
All three colours are shown a value from 0 to 255. One addition to creating RGB colour schemes is “brightness”. This is not visible in all colour mode creation tools, but it is a nice way to transition into other colour modes. The brightness meter, when available, is used to change the rest of the values all at once when changing how bright your final colour is. What this means is that if you set all three values to 255 (highest possible) you will get white.
But if you have Br meter and change the value there, you will be changing the value of all three of the colour meters together (creating different levels of grey). The use of the Br meter can be very helpful when creating different shades of the same colour for the digital space.
CMYK COLOUR MODE
CMYK stands for Cyan, Magenta, Yellow. The “K” stands for Key but think Black or shade of colour combinations. Once again, these are the primary colours used to create multiple other colours. Similar to the RGB colour mode, you create new colours by combining the values of these primary colours. Unlike RGB, this is a subtractive colour mode, meaning the absence of pigment or value in each of these primary colours creates white. Similarly, the addition of the highest value for these three colours will create black.
Unlike the RGB colour mode though, CMYK also uses the black ink separately. What this means is that solid black can be created through either just the Key values or full value combination of the Cyan, Magenta, and Yellow colours.
There is a section further down on different shades and types of black that will be referring back to this mode quite a bit. But, back to CMYK, what I want you to think about when it comes to CMYK is PRINT, as this colour mode is best for printing. CMYK is the standard used for print production and one you should be very closely associated with if you have any physical products, services, or advertisements.
CMYK colour values are all based on a percentage from 0 to 100. As mentioned, different shades are created by combining the values of these three primary colours. At this point, I am going to get back to the finger painting metaphor and let you go wild on it. The more value you add of a colour, the more you are mixing it.
Along with your three primary colours though you also have a bucket of black that allows you to control how dark your new colour will be. Unlike RGB, changing the value of the Key shade will not change the values of the rest of your colours. Additionally, unlike RGB, you can create different shades of grey through just the Key shade, instead of having to utilize any other colours.
HEX COLOUR CODES
HEX, based on the word “hexadecimal” and referred to as “hex triplet”, but more commonly known as “web colours” is a colour code system used on the web. The HEX colour codes are based on RGB, as it is a digital system, but the codes are created from computing languages and codes. All HEX codes consist of six characters where the first two represent the red value, the next two represent the green value, and the last two represent the blue value (your RGB colour mode).
Due to the original computing languages, each value consists of a number between 00 and FF, which is also consistent of 0 to 255 (your minimum and maximum RGB values). Also note that some of the HEX colour codes also have exact colour names, which can be used when developing or coding your website.
As such, when you hear HEX colours, I want you to think of WEB. These names are usually the standard and most basic (no periwinkle). If you want to get into the details of how each colour is named, it would be a smart idea to learn about the hexadecimal system in mathematics and computing.
Hexadecimal is a positional system that represents numbers using a base of 16. Unlike the common way of representing numbers with ten symbols, it uses sixteen distinct symbols, most often the symbols “0”–”9″ to represent values zero to nine, and “A”–”F” to represent values ten to fifteen. (Technical definition available on Techopedia.)
PMS COLOUR SYSTEM
PMS is another way to look at colours. Unlike the RGB and CMYK colour modes mentioned above, PMS is a colour system. PMS stands for Pantone Matching System. It is a system where thousands of colours have already been pre-mixed before printing begins (unlike CMYK where cyan, magenta, yellow, and black are mixed together during the printing process to create your colour combinations).
As the colours are already mixed, this means that no matter what printer you use anywhere in the world, your colour will come out exactly as the little Pantone booklet you have hidden in your drawer.
While the PMS was originally created for print, due to its popularity and precision all coloured swatches now have an equivalent RGB, CMYK, and HEX codes. This means that you can now have exact values created for you that are already translated to the most common colour modes.
One of the things that the Pantone system is very good for is printing are colours that are not available through CMYK. This includes neons and metallics. Even though the colours are available though, make sure you have access to a specific printer that can produce these colours for you.
B&W
Okay, this one should be quick obvious: black and white. And this is not a colour mode or a colour system, but I felt it was worth mentioning here due to the extensive blacks and whites available.
BLACK
Black can come in many different shades. Maybe only a specific one will work for your current job. In reference to printing in black, there are two main shades that you need to be aware of: rich black and standard black. Based on the CMYK colour scheme here is a quick explanation of what to the two are.
Rich Black is when each of the CMYK tones is set to 100%. This means the colour is a combination of Cyan, Magenta, Yellow, and tinted to the darkest possible. This is only used for registration marks so printers can ensure each of the colours is laid down correctly on your pages.
The second black to be aware of in print is standard black is when each CMY us equal to 0% and K is set to 100%. This is not any lighter than the rich black, but it is a lot less ink. Using this black for text prevents any overlays if your printers are slightly off and leaves your text nice and crisp. Note that having 400% of ink on paper in large quantities can also damage your paper and can mean longer drying times in some cases. As a rule of thumb, do not use any colour that adds up to more than 300% total in all colours!
When it comes to print, you do not need to differentiate using these two blacks. You can differentiate by creating warmer and cooler shades of black or by using different printing materials and shades (such as glossy black text on a matte black cover) or similar. You do not need to differentiate between rich and standard black as much as you need to differentiate between different shades of black based on the project you’re working on.
SHADES
As for shades, you can create warmer or cooler shades of black. In the case for print and using the CMYK colour mode, setting your K to 100% and then playing with your Cyan picker will create cooler shades. Playing with your Magenta picker, on the other hand, will create warmer shades.
There is no point in playing with the Yellow picker, as the colour difference will be minimal. You can, however, combine any of them to find the exact shade of black you would like to use. Please note that these differences will not be so visible on the screen as we are referring to the print space and CMYK colour mode.
You can, however, do the same within the RGB colour mode. This is especially easy if you have a Br (brightness) scale when choosing your colours as all you have to do is set all of your values to 0 and then play with either the Red (for warm) or Blue (for cool) pickers to create a new colour. This colour will be much lighter than the original digital black, but it will have the shade and style to match the rest of your colour scheme.
Similarly to black, white can come in different shades too.
Although, it is mostly the greys that can be played around with. You can turn a simple light grey into a beautiful tan by strengthening to the magenta (in CMYK colour mode) or the red (in RGB mode) by making it a warmer shade. The exact same way you can play with the cyan (CMYK colour mode) and blue (RGB colour mode) to create cooler shades.
CHOOSING A COLOUR FOR YOUR BRAND
Long story short, the colour used on your website will most likely not be the same used your business cards. While the colour may look the same to the eye, it will most likely have a different colour value. Make sure that your specific colour is one that can be properly translated in both print and digital.
The best way to do this is to compare it yourself when selecting colours. You can use any online conversion of RGB to CMYK or reverse to see any differences. Remember though, most monitors are not calibrated to view print colours and the reverse is true with printers.
What this means is that the colours you are viewing on your monitor at home will appear different on a laptop and different again on a mobile screen. And while you may be able to compare between all of your digital devices to see how your colours will look, you don’t have any control over how they will look to someone else.
Similarly, the colours you are seeing on your screen will not come out the exact same as on your home printer and different yet again with your professional printer. Even more important are the materials, lighting, and printers themselves. These tiny little changes can make major changes to your final product, especially when it comes to print.
As such, the most important thing you need to remember is that everyone perceives colours a different way and no matter how many devices are calibrated the same way, every person will see the colours different.
Also, keep in mind that there are some colours in RGB mode that cannot be made using CMYK and, likewise, there are some colours in CMYK mode that cannot be recreated in a digital scene. Fortunately, those are not that many so there are more than enough colours to choose from that will look the same on both your final digital and print products.
So, when it comes to choosing a colour for your brand (or an entire colour palette), you need to think in slightly broader terms. The values in any colour mode you use must be there but in slightly broader terms. The values in any colour mode you use must be there for you to keep it consistent, but do not focus on changing it by fractions based on what you think your clients will see.
QUICK SUMMARY
RGB: Digital
CMYK: Print
HEX: Web
PMS: Universal