Chris Parker | Emmy Winning Media Designer

Your 1-Stop for All Things Multi-Media

"From Start to Finnish Your Next Multi-Media Project will Sizzle"

The Differences Between
Digital Color and Print Color

Using RGB and CMYK Color Modes

Let’s talk color.

apple-colorwheelHave you ever wondered why the colors of your logo, web page or graphic design always seem to look one way on your computer monitor and then another way when printed?

Sometimes the reds, blues or even grays seem just a little off.  Maybe they’re washed out, a bit brighter, or even a slightly different shade.  What’s going on? You’ve checked the resolution and that seems fine.

Media_Size

So what’s the deal?

Well, not un-like resolution between digital and print, colors are applied and behave very differently and sometimes unexpectedly between the two mediums.

Within the colorful world of multi-media, print media applies color differently than electronic media.  Simply put, everything that is displayed on a computer, device, phone, television, movie screen or any other kind of monitor applies color one way while everything that is printed (brochures, newspaper, magazines, postcards, billboards, etc…) applies color another way.

So what are these different color modes and how do they work?

Well, since you are viewing this article on a screen let’s start with electronic media.  Electronic media uses the standard RGB color mode.  RGB stands for ‘red’, ‘green’ and ‘blue’.  Simply put, each pixel on your screen is capable of displaying any combination of red, green and blue light.  These primary colors, when added together, create a myriad of different shades and color.

RGB Red - Green - Blue

For example when blue and red are added together they produce magenta or purple.  When blue and green are combined they produce cyan or light blue and when red and green are combined, yellow is produced.  Each color’s saturation can be controlled thus creating millions of various shades.

RGB Additive ModeAdding primary colors produce secondary colors - Cyan, Magenta and YellowNote the white when all 3 colors are combined

I’ll use Adobe’s Photoshop to demonstrate the RGB model.  By the way, since virtually all media is created electronically on a screen, including print design, color, by nature, is viewed and applied through the RGB mode.  Photoshop can preview other modes, such as CMYK, but this is only an RGB conversion preview, not a pure CMYK display.

Photoshop's Color PickerJumping into Photoshop and clicking ‘set foreground color’ on my tool palette I open up Photoshop’s color picker.  As you can see Photoshop offers a variety of ways to choose your color.  Remember, regardless of the choice, everything on your monitor remains RGB.  Conversion to other modes occurs outside the electronic realm.  I’ll touch on this later.

All RGB values at '0'

Right now, everything is set to ‘0’.  ‘R’, ‘G’ and ‘B’ all have a saturation level of zero.  And as you can see, the color canvas is black.  Since there are no RGB values, there is no color.  Anything you create such as a shape or a text object using these values will be black.

In this color picker we can enter any value from 0 to 255 in each of the RGB numeric fields.  These numbers are based on 8-bit color depth (a common graphic program setting – more on that in another tutorial) and control each color’s saturation or amount of color.

So a ‘red’ setting of ‘255’ is the maximum amount of red color.  If all colors are of equal value then a shade of grey is produced.  All colors set at the ‘255’ maximum saturation point produce pure white.  Mixing color values and saturation points creates any shade you may need.

Color Picker Set to Orange

For example, I’ll type in 230 for our red value, 140 for our green value and 20 for our blue value.  This produces an orange color in our color canvas.  Clicking ‘OK’ I’ll now type ‘ORANGE’ on our canvas and voila, orange text.OrangeText

Now let’s talk print.  While electronic media uses the ‘additive’ RGB process, Print uses the ‘subtractive’ CMYK process.  CMYK refers to the four inks used in the printing process.  ‘C’ for cyan, ‘M’ for magenta, ‘Y’ for yellow and ‘K’ is the black key color.  CMYK is ‘subtractive’ meaning the inks subtract or mask the usually white or light colored paper.  This is the opposite of how RGB works, which adds color to a black screen or reflects the combined colors off a white screen.

CMYK - Cyan, Magenta, Yellow and Black

When these CMYK inks are printed on paper, like RGB, they can be combined and mixed based on saturation.  And like RGB these mixed colors produce different shades of color.  Yet unlike RGB, when the CMY colors are all mixed together, because of their subtractive nature, they produce black, not white.  The ‘K’ or black key color is only mixed to produce a true black or dark shade.  Mixing the cyan, magenta and yellow inks to produce black requires much more ink and processing time.

The 'subtractive' effect of combiningcyan, magenta and yellow the black key color is used for pure black tones

Think of it this way.  Electronic media uses light, which brightens or adds light to an image.  Ink is a dye, which darkens or tints a material such as paper. Controlling the light in RGB or the ink in CMYK controls the color.

Though you may preview a design as CMYK in Photoshop, it is not until the actual print process where the CMYK colors are produced.  You may ready a Photoshop document as CMYK by switching image modes.  This will convert and embed the necessary color profile into the document enabling the printer to allocate the correct amount of CMYK inks.

The Corresponding CMYK Values to the RGB Orange Color

Using our orange color example let’s re-open Photoshop’s color picker. To the right of the RGB fields we can see the corresponding CMYK values displayed as percentages.  These percentages represent levels of ink saturation or halftones.  This means that our orange text when printed will use a very small amount of cyan and black ink and a much larger amount of magenta (about half its total saturation) and pretty much a full amount of yellow saturation.

Because print and electronic media are different by nature it is important to preview your print design before committing to the final color scheme.  As discussed, RGB and CMYK are very different processes.  Fortunately, graphic programs such as Photoshop offer fairly accurate previews.

RGB Rainbow of Color

Same Rainbow as CMYKNote the muted colors

Using Photoshop’s gradient tool, I created this color spectrum.  As you can see the RGB displays it’s full color richness.  Now under IMAGE – MODE switch from RGB Color to CMYK Color As you can see the rainbow’s colors have been slightly de-saturated in spots.  This gives you a more accurate read of how your colors will look once printed.  Here’s a hint.  If you’re working on a print design for a client it’s a good idea to give them a CMYK preview image so there is no ‘freak out’ over color inconsistency.  Of course the best thing to do is get a printed proof for exact color consistency.

Switch from RGB to CMYK Mode

Switch from RGB to CMYK Mode

Changing the fields in one mode will automatically change the fields in the other modes

As you can see Photoshop’s color picker allows you to see the direct correlation between all the different color modes.  Using our Orange color example we can tweak the RGB fields and the CMYK values will update accordingly.

There are several other color modes, which I won’t get into now, that Photoshop allows you to use such as Lab and HSB.  There is also color depth, which allows for greater accuracy and vibrant color.  The greater the depth, the better the color.  There are also other factors such as not all screens and displays are calibrated equally, and paper is a completely different medium than a digital display.  Suffice it to say though, understanding RGB and CMYK gives you a sound foundation on how multi-media uses color.

I hope you liked this article and learned a little bit along the way.  Thanks for reading and don’t forget to stop by and like my Facebook page.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.