Jul 16, 2008

The Color Conundrum: Translating Colors from Print to Web

Have you ever wondered why some of the colors you experience in a printed piece are difficult, if not impossible, to recreate on the web? Here's why.

Print and CMYK
Print colors are made by adding together cyan, magenta, yellow, and black pigments (also known as CMYK). When dialed in, according to percentage, these four colored inks are able to create a full range of color as seen on a printed page.

Web and RGB
Dissimilarly, computer monitors display color by subtracting red, green, and blue light (or RGB) from a mixture of illuminated color in order to achieve the specified color. These trans-illuminated, or through-light colors deliver a wide range of contrast and color intensity. Print and screen colors will always look slightly different. Some colors seen in print, such as "metallics" or vibrant yellows, will always show up dull on screen while several vibrant on-screen colors such as "electric pink and green" can't be replicated using CMYK output. In this case, specific PMS colors and/or metallic inks may be required.

Shifty Online Colors
On screen colors may shift from monitor to monitor depending on the overall brightness and user settings. PC monitors display differently than Macs due to their native gamma settings. Gamma settings dictate the overall monitor brightness. PC monitors are darker than Macs. While printed color can change with age, online color is always a bit different from one monitor to the next.

Evaluating Color Online
As you find yourself challenged when unable to match a print color in an online environment, the best strategy is to explore a range of "achievable" colors in the approximate range of the color you desire. Create them in one web-ready document, and then view them on as many varied monitor screens as possible. When you create your color variation "mood board", make sure you create variations that are lighter and darker than your original color. You will also want to place these colors in the context of your project's color palette to see if the other colors need to be adjusted.

One Last Tip: Monitor RGB
When you are selecting or modifying colors in Photoshop (or anytime you are working on files that will be viewed through a monitor), make sure you are using the "Monitor RGB" setting. On the Mac, it's under View > Proof Setup > Monitor RGB.

Because you're a Hottie, please log in before commenting:


Bookmarks about Print's picture

[...] - bookmarked by 4 members originally found by runescaperocks8 on 2008-08-17 The Color Conundrum: Translating Colors from Print to Web [...]

Katrina's picture

Wow. Thanks for explaining that, Laura. Everything I always wanted to know about color but was afraid to ask...

Post new comment