Digital vs Physical Color in Reviews

Written by Eric Frederiksen, RoboHead Support Specialist

When you’re in art class as a kid, you learn about the color wheel–red, yellow, and blue are the primary colors. Orange, green, and purple are the secondary ones. That’s just how it is, right? The deeper you explore color, though, the more complex it becomes. If you’re working with color professionally, you know that the colors you see aren’t always what you get. It’s a complex problem involving age-old processes and some light physics. That is to say, the physics of light. But also we’re not going to get too deep into them, so it’s also just light physics. This is a problem that color professionals deal with in print and digital alike. First, let’s talk about emissive/additive versus reflective/subtractive color–this is the whole foundation of how color works.

Color in Light

Credit: Wonderland on Flickr

Chances are, you’re reading this blog entry on a computer or mobile device. All the screens in our lives, from that big OLED TV you were eyeing up at the electronics store to the tiny screen on your phone, display in three major colors: Red, Green, and Blue–RGB. The screen you’re looking at is emitting those three colors of light (often with the addition of pure white light) in different patterns to make the billions of colors these screens can create. This method of creating color is called emissive because the color is displayed through emitted light, such as the pixels in our computer monitors and mobile devices, and considered additive color because, as you increase the brightness and number of colors, you approach pure white light.

Reflected Color

Credit: Pantone.com

The rest of the world off of our screens is all about reflective color. Light hits an object–a flower, a photograph in a magazine, and so on–and then that light bounces off of the object and hits your eye. The dye, pigment, or chemical used to make the color of the object changes the wavelength of the light, and so you see a yellow rubber ducky and a red stop sign. Reflective colors are made in different ways depending on the medium. A painter is going to just mix two colors together. A manufacturer might have a specific dye or pigment. Print in particular uses a process called CMYK to make the different colors we see on a page. That’s cyan, magenta, yellow, and black. You’ll notice that none of those are red, green, or blue–it’s a completely different process.

The complexity comes in, then, when you’re trying to work on print materials in a digital interface. You’re looking at a CMYK deliverable on an RGB screen, and these two media are combining different colors in different ways. 

So now we know that our print and digital media use physically different methods of creating color, which already introduced a complication into the process of producing and reviewing print deliverables in a digital environment.

Adobe and other pro-grade software used for content creation compensate for this, offering things like CMYK color modes and Pantone color matching to ensure exact color creation. But did you know that your browser might not be able to handle images designed for print correctly? Adobe Photoshop is built for design professionals–people who know the meaning of jargon like CMYK, RGB, and Pantone just as a matter of doing their job. 

Web browsers, meanwhile, are built for everybody and every device. They have to support as many pages and file formats as possible, and they’re not built with print in mind (and I don’t just mean when you’re trying to print off text from a webpage without all the ads and menus!). Most modern browsers are limited to RGB color, and that means that your CMYK image might look… a little weird.

Above is a clipping from the same CMYK image as seen in Photoshop, Chrome, Firefox, and Safari. All the colors are there, speaking broadly, but they look different. They’re all just wrong. Off in some way. Note the faded blacks in Safari and Chrome, and the hyper-saturated colors in Firefox. 

Because this affects every modern browser in some way or another, it’s helpful to keep all of this in mind as you create and review deliverables intended for physical media. Here are a few tips for reviewing physical media in a digital environment:

1️⃣ Convert a copy of your file to RGB ahead of time to ensure better consistency across browsers. You can’t account for different display color calibration, but browsers handle RGB color much more consistently than CMYK.

2️⃣ If you have to stick with CMYK for the review segment of the deliverable, warn your users that it might look different. Sometimes things just have to be a certain way, and all you can do is communicate that ahead of time!

3️⃣ Allow your users to download a copy of the file that they can view in a standalone application where they can be sure they’re seeing the same thing that you are. RoboHead review managers can enable downloads on all reviews. If you’re concerned about people that shouldn’t have a final copy getting one, keep reading.

4️⃣ Create a lower-resolution version of your deliverables. This goes for videos and print projects alike–high resolution video files get big fast, and you can save your users time downloading the video by making a smaller one. Similarly, print files can be very high resolution, and users don’t generally need to zoom to 100% on a wrap image meant to go around a bus or train.

5️⃣ RoboHead users working in CMYK can also use our 4-color ink separation tool. This tool lets you break a CMYK document down into its cyan, magenta, yellow, and black layers, in addition to creating layers for any Pantone spot colors.