Color can be important in conveying the meaning of visual content.
Because visuals play an important role in message delivery, paying special attention to color can elevate your creative work and portray professionalism.
Oftentimes, there is a need to use a very specific color, especially if you have to use a color from your organization’s brand guidelines. When you need to stay on brand, you will need an exact color match. That’s why color value codes are invaluable: they enable you to get rid of the guesswork and get it right the first time. But which type of color code should you use, and why? Let’s uncover the meaning behind the acronyms RGB and CMYK.
RGB (red, green, blue) for color on the web
RGB stands for red, green, blue–just like in the acronym Roy G. Biv. An RGB color model produces specific colors by assigning a numerical value, from 0-255, for each of these three colors. The number is indicative of the intensity of red, green, or blue used to produce the color.
The RGB value is 255, 110, 74. This means that Outrageous Orange contains all possible red (255/255), nearly half of the available green (110/255), and almost a quarter of the available blue (74/255). These values, when added together, make Outrageous Orange.
RGB color values are additive. In the additive color system, the colors red, green, and blue are added together in different combinations to produce a new color. When all three colors are added together at full value, white is produced. White would be expressed in RGB as 255, 255, 255. Black, then, would be the total absence of all three colors, or 0,0,0.
Use RGB for all digital or web-only content. The RGB color system is based upon the interaction of red, green, and blue light to create color. Computer screens and televisions rely on the same interaction of red, green and blue light to display anything and everything on screen.
If you use RGB color values, you’ll likely notice that they are often listed with or alongside a series of six letters, numbers or combination of the two. This is called a hex color code. Hex, short for hexadecimal format, is a color made using RGB, but expressed in a different format. Hex codes are often denoted with a pound sign (#) at the beginning. The first two characters show red, the next two represent green, and the final two characters are the intensity of the blue. Whereas in RGB format, 255 means full intensity, in hex format, FF would denote full intensity. You can see how the RGB format compares to hex by looking at the same Crayola colors below. Outrageous Orange is again called out as an example.
There are free conversion tools available online to do this conversion for you. Most programs will allow you to see either RGB or Hex by switching the mode, though.
CMYK (cyan, magenta, yellow, black) for color on printed materials
The letters CMYK stand for cyan, magenta, yellow, and black. Colors represented in a CMYK color code format use percentages, ranging from 0 – 100, to show the intensity for each of these four colors. Let’s use Outrageous Orange once more as an example. Outrageous Orange is made up of 0% cyan, 56.9% magenta, 71% yellow and 0% black. This is denoted as C: 0, M: 57, Y: 71, K: 0.
Use CMYK for all materials that will be printed. For materials that will be used both on the web and for print, you will need to create an RGB version and a CMYK version.
The history of CMYK color codes date back to the days of original printing technology. At that time, printers only used ink in cyan, magenta, yellow and black in various combinations to create the desired color.
Unlike RGB’s additive model, CMYK color values are subtractive. So, while in RGB, white would be represented by all of the colors mixing together at their highest value (255, 255, 255 as noted above), in CMYK, white is considered the absence of color, or C: 0, M: 0, Y: 0, K: 0. Black would then be C:100, M: 100, Y: 100, K: 100. The name subtractive comes from the ink subtracting the brightness from the white paper. Whereas all colors added together in an additive model (such as RGB) utilizing light make white, the opposite is true in a subtractive model. All colors together make black.
Bonus time-saving tip: skip the codes and use a color picker!
So, we know to use RBG (along with the hex variation) for digital content and CMYK for content for print, which is great when you know exactly what color you want to use. But what if you don’t know, or don’t currently have access, to a particular color value? Enter the color picker for the win!
Color pickers are available in many image editing programs. I like to use Snagit, TechSmith’s screen capture, image editing tool, when I’m trying to quickly replicate a color. Color pickers allow you to click on a color to “extract” it, obtaining the color value code for you. Then, you can use that identical color in your creation. Snagit even allows you to save a color as a quick style for future use!
Have you had success (or failure) with color value codes, or replicating a specific color match? We’d love to hear about your experience–tell us about it in the comments below!
