Have you ever found yourself in a situation where colour codes were discussed and noticed you may have forgotten their meaning or didn’t quite know which profile to use?
We want to give our readers a reminder of a simple topic of “the difference between colour profiles”. Knowing the difference helps you to better understand when to use which one. Even if you are not designing materials yourself, it may be good to know the meaning of the profiles, if you are, say, dealing with content management or communications and need to upload content to the webpage or send materials to a print house.
RGB
Simply put, RGB is for electronic environment (like web).
How so?
The RGB model illustrates the human perception of coloured light. The letter combination represents the primary colours of the palette and, thus, in RGB model the letters stand for colours
R = red
G = green
B = blue
Every colour seen on screen is a combination of these three primary colours, since that’s how the screens are built. The RGB is called an additive colour model, where zero value represents black and by adding some primary colour you get new colours. The more you add values of the primary colours the closer you get to white, which is a combination of all three. Not quite what you learned in art class but maybe something you have heard in physics. So, every colour has their own value or code: you may for example have R: 240, G: 115 and B: 40 and you get orange. Each value range is between 0 and 255.
If you want to know why and get deeper into the theory of physics, you can check it out from here, for example.
Funny tip: It’s possible to see these three colours “in a rainbow” when you get rain drops on your phone screen, for example.
CMYK
CMYK is for printed materials.
It is good to remember that screen colours which are made of light may be a lot brighter than what is possible to show up in print, thus the print may look very different than what you planned and saw on screen. This is the case with for example neon colors or other bright colors.
If you want to see how the print will look like, you should work with CMYK profile. Also here, the letter combination represents the primary colours of the palette:
C = cyan
M = magenta
Y = yellow
K = key (which means black)
These colours are the basic ink colours of a printer and all colours printed are mixtures of these four colours.
For the same orange as above in RGB the CMYK value would be C: 1%, M: 68%, Y: 96%, K:0%. It’s good to note that the percentages are not relational portions of “the total” 100% but instead indicate how much of each colour will be used (0-100%). For example you can have all values in 90% which creates very dark, almost black colour.
Bonus code: HEX
In addition to RGB and CMYK profiles, you may have heard of hex codes, which are six digit codes marked with #.
Simply put, hex (or hexadecimal) digit is more user friendly way to represent binary-coded values.
If you are into maths or computing behind HEX, you can read more about it from here and here. HEX codes use a double-digit system where each two digits range between 00 and ff. HEX numbers use 16 digits: values from 0 to 9 and letters from A to F. Like in the previous two profiles, every colour gets their own value/code. HEX profile follows the same logic as RGB: zero value indicates no colour, in other words black (#000000). All colours added, you get white (#ffffff). HEX code for the previously mentioned orange, for example, would be #f07328 and so on.
HEX codes, just like RGB, are used for electronic environment like web. HEX codes use the hexadecimal system to minimise length: you may want to use HEX codes instead of RGB for example if you are editing your website. They may be more convenient to use as they are more compact and easier to copy paste and, thus, they are used in the HTML environment a lot.
So (the least you can get out of this is to) as a practical exercise after reading this, familiarise yourself with your company colours, and find out their codes.