RGB vs CMYK: Why the Difference Makes a Difference

Daniella Alscher
Daniella Alscher  |  June 4, 2019

Knowing the difference between two things that are very similar can feel trivial.

What are you going to do with your knowledge of the difference between alligators and crocodiles? Show off at a party?

Even in the world of graphic design, the difference between typeface vs font is one that has little impact on our understanding of the overall concept today.

On the contrary, the difference between color modes is more than just a fun fact while not knowing the difference can make or break your graphic design project.

RGB vs CMYK

If you don’t have a ton of time to read about the little things that make a difference, at least take a moment to know when to use each mode: 

rgb vs cmyk

That’s the simple difference. If you’re interested in learning more about why that difference matters, read on.

What is RGB?

RGB is all about seeing the light.

Computer screens show color in images, text, and designs with different combinations of red, green, and blue light. This is where RGB comes from.

Therefore, anything designed for a screen – from smartwatches to a jumbotron – should be designed in RGB color mode.

Screens display images with hundreds of pixels. Each of those pixels has three sub-pixels: a red light, green light, and blue light. These sub-pixels light up in different intensities based on the color the pixel ultimately displays to produce a result on a black monitor.

what is RGB 

The screen you’re reading this article on is made up of hundreds of pixels. These pixels come together to display the words and images that you see.

RGB values are displayed in a range between 0 - 255, meaning that there are 256 levels of each of the three colors (red, green, and blue) that can be combined together to create a color on the spectrum between black and white. This means that there are over sixteen million possible colors in the RGB color mode. That’s a lot of options.

For example, the RGB value for the color black is:

R: 0
G: 0
B: 0
 

This means that there is 0% red light, 0% green light, and 0% blue light. In other words, there is a complete absence of light, resulting in black. 

To create white, a designer should input:

R: 255
G: 255
B: 255

 
This is the highest possible value of each color, meaning that red, green, and blue lights are 100% bright, resulting in the maximum presence of light: white. 

rgb black and white 

Another way to think about RGB color mode is by referring to red, green, and blue as additive colors. This means that RGB creates other colors by adding quantities of red, green, and blue together. 

Here are the RGB values for some traditional and popular colors.

rgb colors

What is CMYK?

Not everything we design can be put in front of bright lights. Therefore, designs that are intended for print should be designed in CMYK mode.

The name CMYK comes from the four colors that make up the model: cyan, magenta, yellow, and key. Key represents the color black. Since “B” is taken by “blue” in the RGB model, the last letter of the word “black” is used instead of the first.

what is CMYK 

Black is used in this color mode because even the purest combination of cyan, magenta, and yellow (all lighter colors) cannot create a fully black color. 

CMYK uses subtractive colors, not additive. Adding colors together in CMYK mode has the opposite effect on the result as RGB does; the more color added, the darker the results. Therefore, colors are taken away, or subtracted, to create a light result.

This is because the CMYK colors absorb light, meaning that more ink results in less light. Combining cyan, magenta, and yellow will create a deep brown. It isn’t until key (black) is added that color is removed completely.

The CMYK values are measured in percentages. For example, to make the CMYK color white, the values should be entered into the design software as: 

C: 100%
M: 100%
Y: 100%
K: 100% 
cmyk black and white

Interestingly enough, setting CMY to 0% and K to 100% does not create the darkest black possible. To create a “true” black, the following values should be entered:

C: 75%
M: 68%
Y: 67%
K: 90%

 
This is called “rich black” or “Photoshop black” and is a much more pure black because it absorbs the most light. This color isn’t used often because the physical amount of ink that it takes to produce it can rip lower quality paper. That’s intense.

Additionally, using too much ink encourages smearing which makes the text much more difficult to read. When using black, there are a few different versions that are used by designers that won’t rip a hole through your project. 

Cool Black: 60 . 0 . 0 . 100
Warm Black: 0 . 60 . 30 . 100
Designer Black: 70 . 50 . 30 . 100
Rich Black: 75 . 68 . 67 . 90

 

cmyk black alternatives

Here are the CMYK inputs for some traditional and popular colors. 

cmyk colors

What is the difference between CMYK and RGB?

Simply put, CMYK is the color mode intended for printing with ink, such as business card designs. RGB is the color mode intended for screen displays.

The more color added in CMYK mode, the darker the result. The more color added to RGB, the lighter the result. 

CMYK has a numerical range of 4x100; RGB has a numerical range of 3x256. Therefore, the energetic colors that RGB can produce are difficult to reproduce in CMYK.

When designing, the biggest mistake you could make is forgetting to convert to the appropriate color mode for your project. If you forget to do this, colors could appear washed out or too vibrant. 

Not sure how to convert? Take a look at some of these resources to make sure you’re doing it right.

Final thoughts

As a designer, it would be a real shame if the colors you carefully picked for your project don’t turn out the way you intended. Just as we need to be careful about fonts, element sizes, and spacing in our designs, color is another aspect to keep your eye on. Having a better understanding of how these modes work can’t hurt.

Want to learn more about how much impact your color choices can have? Read more about color psychology. 

Looking for even more resources?

Get 50 graphic design resources, FREE.    Get my resources →

Daniella Alscher
Author

Daniella Alscher

Daniella Alscher is a Content Marketing Associate for G2. When she's not reading or writing, she's listening to murder podcasts or sitting on the couch. Or both.