Nightmares in (Screen) Color

Color challenges for brands in the digital wild

This post has evolved a few times throughout the writing process — from digital-first branding to brand color theory to design system nerdy how-to’s. But here we are, landing on something a lot simpler, and a lot more focused. I think and hope that this can serve has a baseline for marketers to understand how color exists in the digital world. If it’s your job to manage a brand, and consistency is important to you (it should be), then hopefully this can anchor your awareness of the challenges around consistent color in a screen-based marketing landscape.

Focused on Screens

Let’s just put print color aside. CMYK, Pantone inks, paint swatches, packaging consistency, print vendor reliability. Those problems have been around for decades, and they remain challenging. Especially for brands that engage regularly with their customers in physical and printed contexts. For now though, we’re going to focus on screen color, and the nuances and oddities that plague designers and brand managers alike.

Digital Does Not Mean Perfect

Not even close. It seems like #hex colors and RGB values would be a consistent enough technical foundation to ensure consistent color presentation on screens, but there are so many variables between the final design’s color space and the end user’s interaction with a screen or device.

The “‘Nightmare” language is a bit exaggerated on my part, but if it’s your job to control how your visual identity is unleashed into the world, some of these problems can be pretty horrific. Let’s get into the problems we see, and have seen, in over 20 years of brand identity creation and management, primarily in the digital space.

Monitors and Calibration

This is the first and most important variable that is just inherently outside of your control. You, and your designers, simply can’t know how your brand colors are going to look on other people’s screens due to the endless variations in screen settings. New laptops, old laptops, desktops, smart TVs, hundreds of different types of mobile phones, LED billboards, digital poster kiosks, point of sale displays, and on and on. You might approve a gorgeous piece of video content that’s just perfect on your screen, with those bright oranges popping, and your secondary teal looking perfectly dialed. But out there in the world, on someone’s 2018 MacBook Air, set to their personal preferences for color saturation when they bought it 6 years ago… your oranges could look brown, and that teal could be extra saturated to a royal blue. When that same customer hops over to their work computer, your colors look “correct”, but wildly different compared to what they’d previously seen. The result is an inconsistent brand experience, and you have to fully be OK with this happening. Like, all the time. The source creative is exactly the same, but the way it looks across different screens is entirely out of your control.

Some extra variables here - think about the color theme settings on your TV. Cinematic vs Dynamic vs Regular (whatever “Regular” means). If you’ve ever toggled those in the middle of watching a show, you know that the experience of that footage changes significantly. Cinematic/Movie mode tends to be warmer and a bit lower contrast. Dynamic mode pushes the contrast pretty hard, so darks are darker, and lights are lighter. Imagine your brand anthem video being viewed in those different screen modes. Two totally different experiences.

But my favorite quirk to screen color is in the variability between the client team’s screens, and the design team’s screens. I’ve been months into brand identity projects before realizing that the color nuances we’ve been perfecting on our side look very different on the client’s side. When clients and designers are working remotely, which is usually the case, we need to all be aware of our screen color variability. As a design agency, we need to be checking our color palettes across all of our monitors (we have 8-9 monitors, plus 3 smartphones, among three of us here in our Bend, OR office). On the client side, your team likely shares even more monitors. It’s with taking a beat in the middle of the color palette creative process to confirm what colors we’re all actually seeing, and align on language to describe color that brings us together on the same playing field, somehow. This is not easy.

Brightness Controls

Remember that brightness controls are more and more available to people using monitors, devices, screens of all kinds. Your colors, and your color contrasts in particular, change significantly when screen brightness is turned up or down. If you have accessibility commitments, remember that color contrast and legibility are at their best on bright screens, but fall apart quickly on darker screens.

Some smartphones (and laptops) will automatically shift to warmer colors in the evening, trying to limit your exposure to blue light close to bedtime. Brand colors change in this context as well. There’s very little that you can do - maybe nothing at all - but this goes to further illustrate the nuances that affect how your brand colors are experienced by your customers and prospects.

And it’s fundamentally true that certain colors are only achievable on a digital screen. There is no print equivalent. Brightness is the reason here, so know that modern brand palettes are often not replicable outside of the digital space. This means you’re likely to need to manage alternative CMYK colors as part of your system, and it’s important to know which color is the gold standard. Usually it’s the brighter version you know you can put up on a screen.

Don’t Forget Dark Mode

This one can be managed, at least a bit, through the way you handle your logo assets in particular. Emails, browsers, many software and social platforms are all easily toggled to dark mode by the user. If your logo file is black, on a transparent background, then it’ll look great on white or light backgrounds. As soon as someone flips to dark mode though, your graphic is now black on top of very dark gray, and effectively invisible. By setting your logo file, for these contexts, on a high contrast background that’s built into the PNG or JPG, you ensure full contrast and recognizability in light mode or dark mode. Think about contexts where dark mode may be a thing to contend with, and plan your use of color accordingly.

Flat Color

Often times the key brand identity visual element that needs to be perfect is simply a flat color. Hulu’s electric green. The Baltimore Orioles’ orange. Coca Cola red. Just one color value, spread across big swaths of design layouts. Discipline on that one official color value, ideally in #hex, is key here. Using the right color value, and the right core brand assets that have that correct color value correctly incorporated, is sometimes harder than you’d think. Don’t rely on your style guide’s rules to do the oversight for you. Designers make mistakes, internal teams make mistakes, and vendors/partners make mistakes all the time. Train your teams to get it right the first time, and then train them to watch for discrepancies in the future.

You can’t control the end-user’s monitor settings, but you can definitely control the graphics that you send to that screen for consumption. Be a hawk in creative reviews and approvals. Empower your design teams to be responsible for getting this right, every time.

This is extra important when a brand is going through a design system refresh, and the core color palette is being enhanced. If the color shift is subtle, which it usually is, the likelihood of that old color sneaking back in to your executions is very high. Think about how many hundreds or thousands of old files are still out there with the old color theme in use.

Textures

Things get all that much more complicated when your key branded background is a multi-color texture of some kind, with a million different hues all stacked up next to each other on the pixel level. I kind of have nothing to offer you here, except to try to make sure that any colors within this design element that relate to your core brand palette are properly handled. With a more elaborate background image, the chances of color inconsistency are in some ways protected by the dynamism of that graphic. It’s easier to get Hulu’s green ‘wrong’ than it is to get, say, a photographic collage ‘wrong’ in the eyes of your audience.

Gradients

Linear gradients are fairly straight forward. The color on one side should be perfectly nailed, and the color on the opposite side should also be nailed. What happens in between is a bit dependent on the design software, or code, that’s generating the gradient. Complimentary colors, like blue < > orange, green < > red, and yellow < > purple, have great contrast, but when used in a gradient, tend to get muddy in the middle. The middle areas can look very different (inconsistent) when you get into those different monitor calibrations and saturations. If you can avoid messy and muddy gradients, your chances of maintaining consistent color will improve.

For multi-point or non-linear gradients, the same problems amplify. The colors in between are quite hard to manage, and will open you up to likely inconsistencies across multiple touch points.

Gradients are all the rage these days, and they offer a more nuanced treatment of branded color, but you should plan on increasing your tolerance for inconsistency if your brand design system relies heavily on gradients. Give and take, as always.

Compression

Keep an eye on any situation where original files, with perfect color management, have been compressed, converted, or otherwise changed through some sort of design process or export from one environment to another. Strange things can happen to files as they’re run through multiple processes, and the chances of your color remaining accurate go way down as original files are tinkered with. This is more about asset management than color management really - make sure that the key colors in your key files are organized and maintained. Make sure designers and internal teams always go to the same place for the same approved assets. If they’re allowed to modify and save-as, you’ve lost the original control you worked so hard to establish.

CMYK Sneak Attacks

Using logos as the most obvious example here. Most design teams maintain RGB/screen logo assets for screen use, as well as CMYK logo assets for print production use cases. Usually they have ‘RGB’ and ‘CMYK’ in the file names, and they’re put in folders with ALL-CAPS CMYK and ALL-CAPS RGB just to make sure nobody grabs the wrong one. But it happens, all the time. A CMYK logo is converted to RGB on the fly by a designer who references the style guide and updates the color in their working files to save the time needed to navigate back to the official files on some Drive somewhere. They may or may not get it right though, and it’s on the creative leads and marketing/brand teams to keep an eye on rogue print colors sneaking in to digital executions. The same problem exists in the other direction as well - someone grabs an RGB logo file and drops it into a print layout without correcting the color values for CMYK. All of these scenarios lead to unforced-errors in your color management. Everyone thinks the right stuff is going out, but a mistake sneaks in, and the logo color ends up looking way off.

Remember that it’s often very hard to notice on screen, when working with brand assets, that the color values will be incorrect in the final deliverable or use case. It’s hard for designers who work on these files every day, and we definitely can’t expect sales teams, partners, or executives to recognize the discrepancy.

Design Software Oddities

All professional design applications have controls for color space. Meaning, on the file level, something is either set for screen color or for print color. You’d think these controls would be universal, at least across the Adobe Creative Suite… but no, they’re a bit different in every case. And of course some applications are inherently used for screen output (motion graphics, video, web). But these all handle imported CMYK files in different and strange ways.

On a design process level, it’s exceptionally important that template files and core brand assets are properly managed for output to screens and/or print. If this is done as the design asset library is being built, you’re on the right track. If you realize this too late, when files have proliferated to all corners of your universe, it’s going to be a beast to catch color space mismatches going forward.

Digital “Collateral”

What do we mean when we talk about collateral in the digital age? Things that used to be designed as print pieces are now nearly always distributed as digital assets in PDF format. Certainly this is the case in the tech/B2B world. But then when that annual trade show comes around, marketing managers grab the digital file and just shoot it off to the printer for a quick 500 copies. If your core brand colors look different on screen than they do in print, you’re managing two distinct color palettes for CMYK and RGB — and if the RGB asset gets printed, it’s going to look off. Likewise, if a digital asset is built in CMYK color for printing, then shared as a PDF digitally, all of your rich on-screen colors will look muted and inconsistent. If you meander freely between printed and digital collateral assets, make sure you’re creating different versions for different delivery scenarios. They’re not interchangeable.

More on PDFs

When a designer saves out a PDF to share work in progress, or to share something final for client approval, the PDF export settings can easily override whatever otherwise carefully managed color space settings they’d previously put in place. Watch those PDF settings y’all! Just because your file was set up perfectly, know that the final save-to-PDF step could throw things off wildly. Different PDF settings are crafted for screen or print, but never both.

—

Designers, stay on top of your craft, and make sure you’re putting as much effort into your asset libraries and template systems as you did on the visual identity design itself. Brand teams, partner with your agencies and internal teams to make sure that your brand’s use of color out in the world is well executed, adaptable for all use cases, and managed with an eye on the likelihood that things will go wrong along the way.