When you open a design program like Photoshop, you may notice that there are multiple color modes. While Indexed Color, Lab Color, Grayscale, and Bitmap have their place, they don’t get used much. If you’re still curious about them, you can learn more on Adobe’s website. However, you’re usually going to use either CMYK Color or RGB Color.
CMYK vs RGB
The most basic difference between these two color modes is that CMYK is used for print and RGB is used for digital. Why? Because CMYK is a restricted color range that can be printed and RGB includes a larger color range that can be displayed through light. You can see in the image below that CYMK actually has the smallest range of the color modes (with the exception of Index, which isn’t pictured, but only includes 256 colors), because it’s limited to the colors that can be created in print with a few ink colors.
Subtractive vs Additive Colors
To explain how this really works, let’s start with the basics. You’re likely already familiar with the color wheel. You start with three primary colors – red, yellow, and blue – and mixing them creates secondary colors – green, orange, and purple/violet – and everything in between.
The color wheel is based on subtractive colors, just like CMYK. Subtractive colors use pigments, or materials that absorb part or all of the light spectrum and reflect back the rest. So when you’re looking at a red apple, the pigments in the apple are actually absorbing all the light in the spectrum except red, which it reflects back. A little confusing, but maybe the diagram below will help.
CYMK stands for Cyan, Yellow, Magenta, and Key (Black). If you understand the concept that white is the presence of the full color spectrum, and black is the absence of color, it makes a little more sense why colors get darker as you combine them. Since subtractive colors reflect back the colors they don’t absorb, combined they absorb all colors, reflecting back nothing (or black).
In the light spectrum, however, colors are additive, and it's utilized by the RGB color mode. RGB stands for Red, Green, and Blue. These three colors, added together, create white light. Notice anything interesting? Blue and red create magenta (the absence of green). Red and green create yellow (the absence of blue). And blue and green create cyan (the absence of red). The combinations of RGB create the CMY in CMYK! And you’ll notice the reverse happens with the subtractive color diagram – the overlaps of cyan, yellow, and magenta create red, green, and blue.
Color Codes
If you’re working in print, you’ll likely use a lot of Pantone colors, or “spot colors”, to choose what you use to design. These are formulated colors that can be purchased as inks to always get the accurate shades necessary for print. But even with Pantone swatches, there are CMYK equivalents, using the percentages of cyan, magenta, yellow, and black to create similar tones.
For digital design (like websites and apps), however, Pantone can convert to RGB colors, but it defeats the purpose of using Pantone at all, since you don’t need to match the colors to what they’ll look like printed. Instead, RGB colors should look fairly similar on any device that’s decently calibrated. To share those colors for consistency throughout projects, RGB is often displayed in a hexadecimal format. You may recognize it – a pound/number symbol followed by six numbers and/or letters.
Hexadecimal Codes
You can learn more about hexadecimal numbering here, but the short explanation is that we normally count with a Base 10 (decimal) system and hexadecimal is a Base 16 system. After counting 0-9, it continues counting with A-F before starting over at 0. A decimal system using two digits maxes out at 99, whereas a hexadecimal system with two digits can reach the equivalent of 255 (FF)! Much better for referencing such a large span of colors, which is exactly what a hexadecimal color system does. The six numbers and letters reference two digits for Red, two digits for Green, and two digits for Blue.
So #FF0000 would be red, #00FF00 would be green, and #0000FF would be blue. Because the absence of color is black, the hexadecimal code is #000000 (for no red, green, or blue). Conversely, #FFFFFF represents white (all red, green, and blue). If all three colors are equal, regardless of the amount, you’ll get various greys. #EEEEEE is a very light grey. #777777 is a medium grey. #141414 is a very dark grey. Once the amounts of red, green, and blue vary from each other, though, they create colors, like our BYU navy #002e5d (no red, a little green, a bit more blue).
Since additive color means more color (via light) builds to white, you could easily lighten the color by just increasing the amount of each color, like #004e7d (still no red, but a bit more green and even more blue). Since the green and blue are increased the same amount, instead of maintaining the same ratio, the color will be off, so I recommend using a program like this one by CSS Font Stack to do the math for you.
You may also see hexadecimal codes shortened on occasion. #EEE would yield the same results as #EEEEEE, because most browsers and programs know to double each digit. Similarly, #F60 would result in #FF6600.
Other RGB Codes
You may also see RGB referenced in a decimal system using the numbers 0-255 like:
rgb(0,46,93)
Sometimes including “a” for “alpha” or the opacity of the color on a scale of 0 to 1 like:
rgba(0,46,93,1)
While it’s not hard to convert between the two styles, it can be time-consuming, so I highly recommend using a color converter like this one from W3 Schools to convert them for you.
There are also 140 named colors already defined within all modern browsers. You can access a list of them here. If your style guide allows for it, you can use the names instead of remembering the six-digit codes (like DeepPink instead of #FF1493).
Now that you understand how to use RGB and CMYK colors, go make the web a more colorful place!
Works Cited
Fig.1 - RGB versus CMYK, http://www.printernational.org/rgb-versus-cmyk.php.