HEX, RGB, CMYK Oh My!
If you have ever done design work on a PowerPoint you might have seen the term HEX or the letters RGB and if you have been doing more advanced work you might have even seen the letters CMYK. What do these terms mean and what is the difference between them? Most importantly, why does it matter? This article answers all your questions about the three primary colour systems business owners should understand.
The shortest answer is that each of these systems is a different way to produce colours. There are more systems to produce colours such as Lab, RAL and Pantone, however unless you are a print shop owner, HEX, RGB and CMYK are the main systems that the average business owner will come into contact with regularly.
Introduction
Picture from Printernational.
Humans can see a wide range of colour on the colour spectrum represented by the circle in the image above and to our knowledge, there is no system that can recreate the entirety of the spectrum visible to humans. Some come close like the RGB colour space noted by the yellow outline in the image but none are perfect. In the image shown you can see the range of not only the RGB system but also the CMYK system and the Pantone spot colour system. The HEX system is just a catalogue of RGB codes that can easily be placed into a website code as needed. More on that later in the article.
CMYK
CMYK stands for Cyan, Magenta, Yellow and Key, the Key colour is usually black so if you just remember it as Cyan, Magenta, Yellow and Black you would be correct most of the time. There is a reason that the last colour is called Key rather than just black but that is outside the scope of this article, there is a great article about the Key colour by Casey Printing for those interested. The values of each of these colours can range from 0 meaning no colour to 100 meaning the most saturated version of the colour possible.
CMYK is the colour system used by digital printers ranging from commercial printers to your desktop printer. This system creates colours with reflected light (eg. the colour is created by a light source bouncing off the substrate and hitting your eye) by mixing various amounts and drop sizes of Cyan, Magenta, Yellow and Black ink. Various mixes of Cyan, Magenta and Yellow will give you almost any colour in the CMYK spectrum with the exception of Black, if you mix them together you just get a really dark brown, which is why a separate Black ink is needed for this system.
RGB
RGB stands for Red, Yellow and Blue. This system is a colour system for colour that will live on screen as it is a system for creating colour from emitting light that you look at directly such as your computer or phone. The values of each colour in this system can range from 0 which means there is no colour emitted to 255 which emits the most vibrant version of that colour. When you mix all colours together you get white so a RGB value of 255-255-255 will give you white while a value of 0-0-0 will give you black.
HEX
Sometimes represented with a hashtag/number sign, HEX codes are also a form of colour for the screen. It is essentially a code for RGB colours that a computer can understand in applications such as websites. Think of it as a coding shorthand. HEX codes are made up of 6 alpha-numaric characters, yes that’s where the name “HEX” comes from, that represent RGB values. The first 2 characters represent the Red value, the middle represent the Green value and the last represent the Blue value. That means any colour that can be represented in RGB can also be found in HEX. A completely Black screen would have a HEX value of 000000 and a completely white screen would have a value of FFFFFF. If you are interested in learning more about the inner workings of the HEX code there is a great article by CodeConquest.
Hopefully this article has given you some insight into colour systems and the differences between them. If you have any questions our Graphic Designer would be happy to help! Feel free to reach out to us with any questions.
About the Author - Jack C. Henry
A graduate of OCAD University’s Graphic Design program, Jack blends art with real-world business strategy. The result? Creative solutions that add value to your business. Jack has designed for a wide range of industries including restaurants, retail stores, health care, community organizations and charities. As well as helping companies develop their brand, he creates beautiful marketing materials and signage. More…
About OmniWorx Inc.
OmniWorx Inc. is a boutique design firm based in Scarborough in Toronto’s east end, with an office in Peterborough in the Kawarthas, providing graphic design, branding, marketing services to individuals, local small & mid-sized businesses. More...