Color spaces for print and web

Courtney George / Posted 4.18.2017

Color spaces for print and web

The difference in how we apply color for screen viewing and how we apply it for printed materials might seem like an insignificant little detail, but it’s one of the most important distinctions to be aware of when working with digital and printed media.

The digital color model is vastly different from the one printed materials use—scientifically, technologically, and in its application and usage. Here’s why: Digital color space employs a three-color, additive model called RGB (Red, Green, Blue). This means that all possible colors are created by adding percentages of the three colors together with a fourth element: emitted light (produced by a screen, projector, or bulb). Screens and televisions create images using pixels, each of which contains red, green, and blue subpixels.

In contrast, the printed color space employs either:

  • The four-color, subtractive model called CMYK (Cyan, Magenta, Yellow, black)—In this model, all possible colors are created by combining percentages of the four colors together with a fifth element: reflected light.
  • The Pantone Matching System (PMS)—In the Pantone system, standardized, patented inks are selected by corresponding number (from color charts that look much like paint chip charts). Typically, specified colors are ordered, mixed by, and shipped directly from Pantone to the print shop.

Lots of dots

Georges Seurat was way ahead of his time with his pointillist style of post-impressionist painting, in which he painted large canvases with small dots instead of brush strokes, resulting in compositions that appeared to be nothing more than random, complicated patterns of dots of color up close, but stunning works of realism when viewed from a distance of only a few feet.

Print (CMYK or PMS) and digital (RGB) methods both output colors and images with dot patterns, via slightly differing methods. LCD screens, for instance, use light, voltage, and liquid crystal subpixels to produce different combinations of Red, Green, and Blue that create an image when viewed from typical distances (detailed explanation here). A screen that is not LCD produces color in an almost identical manner, except by using phosphors (subpixels), electron beams, and light.

Four-color printing, on the other hand, involves laying down dots as single-color layers of translucent ink, one on top of another, to create the illusion of a full color image. This method is subtractive because the intensity and saturation of each printed dot subtracts a variable amount of reflected light from the paper’s original color.

Ensuring color looks right in both CMYK and RGB

If you’ve selected specific colors to represent your brand, consistency is important. Different colors convey meaning, mood, and personality in very different ways. So if your business is fresh produce and you’ve selected a lovely bright green to convey its freshness, imagine your disappointment when you get those postcards back for your spring produce campaign, only to discover that somewhere along the way, someone converted your color incorrectly and what you got instead was a not-so-lovely shade of muted brownish green—a color that probably conveys rotting produce more than something fresh from the garden.

If someone else is handling your design, the easiest way to avoid a problem like this is to see a proof. In terms of print materials, that’s an actual one-off print that shows you what the final prints should look like. If the proof’s color is off, ask your printer to adjust it and show you another proof until you get the color you want, and then ask your designer or printer for a copy of the proof you can keep to compare the final deliverables to. In terms of digital color, your web developers will first show you flat layouts of what your website will look like (before they build it), and then have you review the site once it’s built, but before it’s live for the public to see. At any time during this process, you can have them adjust the site’s colors to your liking and to match your brand.

Or you could save yourself some time and hassle and put together a simple one-page brand standards guide, outlining the specific colors you use for your brand along with specified builds for CMYK, RGB, HEX, and Pantone (if you use Pantone colors). In the case of Pantone colors, start with your Pantone colors and use a Pantone conversion/build guide, which will give you exact conversion numbers for each color to RGB, HEX, and CMYK. Otherwise, pick each CMYK color, convert it with a color picker (online or in an application like Photoshop) to the RGB and HEX colors that match the closest. If your conversion doesn’t result in an exact match, look at other nearby colors on the scale to get a number combination that is more exact.

An additional note about the finish and color of paper stock you choose to print on: If you plan to print color (other than black) on colored paper (rather than white), keep in mind that the color of the paper will affect the color of the ink, and you may need to have your printer make adjustments to correct the appearance of the printed color. Even plain white papers are offered in an array of finishes. Uncoated and coated are two large categories. Coated paper comes in a variety of finishes such as dull, matte, silk/satin, or gloss, and each finish accepts ink and color differently. Thankfully, Pantone offers chip books that are printed on each of these substrates, to help eliminate some of the guesswork when choosing color for different sheets. If you plan to print on a coated matte paper, for example, choose your colors and builds from the Pantone Formula Guide Solid Matte book, instead of the standard Pantone Formula Guide, which is printed on a gloss paper. You can read a little more about the different coated paper finishes here and here.

Things to understand about color across platforms and devices

1.) You will never achieve exact color consistency throughout your brand, and knowing that up front will help you in the long run, especially if you have perfectionist tendencies.

Close enough is good enough in most cases when it comes to branding and color in digital and in print. Even if you painstakingly select your color builds, and spend tons of money on color management gadgets and practices, the pursuit of perfection is futile, mostly because you only have control over your devices and anything you view or output from those devices. You have no control over the hardware or settings someone else uses, or over print devices you don’t color manage.

2.) When in doubt, hire a professional.

If all of this sounds much too complicated to worry about in addition to running your business, hire a qualified print or web designer to pull together a brand standards sheet for you. Their methods are likely vetted, and you will get accurate color conversions that you can give to anyone who does design work for your business in the future, and feel confident your color will be very close to what you expect.

3.) Select Pantone colors from a printed Pantone chart, not a screen.
When you choose a Pantone color, don’t use an online, web, or digital color picker. Use recently printed Pantone books, look at more than one, and also look at the corresponding builds Pantone provides for CMYK and RGB/HEX. Many Pantone colors cannot be accurately reproduced in CMYK or RGB. Looking at a build book allows you to see what is and is not possible with any Pantone color you’re considering. Unless you want to spend a lot of time and money on your design, marketing, and branding (printing with Pantone is not very budget friendly, especially for small quantities), pick a Pantone color that easily converts to both CMYK and RGB, or at least one for which you can find good matches in the other color spaces, if Pantone’s formula-based conversion doesn’t look quite right. It does limit your choices, but there are still thousands of beautiful colors to pick from.

Color is complicated, not impossible.

This is only a brief summary of the differences between color use for digital and print applications, and really only scratches the surface. It should be enough to get you started with some of the basic concepts of how color works and looks in digital and in print, and offers a few tips on how to successfully convert colors between the two. The important thing to remember is, there are professionals out there to help you navigate these challenges if at any point you feel you’re in over your head with pixels and dots.

Courtney George

Courtney George

Client Relationship Manager

Courtney George is the Client Relationship Manager for Q Digital Studio. Over the last 18 years, Courtney has held positions with design studios, advertising agencies, and an in-house design team at an architecture firm, as well as having run an independent design business. During her years immersed in the creative industry she has expanded her appreciation for sustainability, community involvement, collaborative environments, and relationship building. This shifted her focus from the design side to the client side and she embraces client relationship building as a vital aspect of any successful business.