Inbound Marketing + Sales Blog

April 9, 2013

Color Management Best Practices for Web Design

Written by: Christopher Mathieu  |  Share:

Christopher Mathieu

color-management-best-practices

Until recently having both of those terms in a single headline would have made me (and most of my fellow web design colleagues) cringe…

In a nutshell the aim of color management is to keep colors consistent across an array of displays. This is a good thing in theory but unless you pay close attention to your color settings when generating web graphics, the browsers can take over and assign their own values. This might not seem overly important at first, but when an official corporate blue suddenly shifts to a purple hue, chances are you’re going to hear complaints.

Keep in mind, the technique I’m sharing here works for IE, Chrome, Firefox and Safari (which all support color management), and I can’t guarantee results with less common browsers. Also, this technique is only 99% accurate, and for some unknown reasons, some colors still shift by tiny amounts. Luckily the shifts are subtle enough that the human eye can’t really see a difference (even with big blocks of fill).

The solution to this color management situation, is to use a standard and widely adopted color space. In this case, sRGB which was created to solve color matching issues. The “s” stands for “standard”, and in addition to computer displays, is now used for HDTVs and more recently mobile devices. It’s been adopted by the W3C and all major browsers support it. For more information on sRGB you can check out this excellent Wikipedia entry.

Download our free eBook to learn the 10 essential elements of a successful  website redesign.

Part 1 – Setting Your Photoshop Color Mode

The first step is to make sure your overarching color settings are setup for sRGB and are NOT using some monitor specific or legacy profile. This blog post assumes that you are on a current version of Photoshop, though I imagine there are similar settings in other design programs so if you’re not using Photoshop this logic should still apply. To modify settings go to Edit -> Color Settings.

color-management-best-practices-settings

Working Space

This is the color space that Photoshop itself will use for display. You want to make sure you choose sRGB since that’s what your end browsers support.

Color Management Policies

Switching this to “Off” will do two primary things. It turns off color management for newly created documents and also ignores color profiles embedded in existing documents (unless they already use sRGB in which case they are preserved). So this leaves us with both new and existing documents using our preferred sRGB color space.

Part 2 – Save for Web & Devices Settings

One of the great features in Photoshop is it’s Save for Web exporting feature. Beyond a really great compression it provides us with nice previewing tools and specific settings for outputting web-optimized images. Below are the 3 settings you need to pay attention to, to keep our colors accurate in the browsers. These settings apply to JPG, GIF and PNG (both 24bit and 8bit) file formats.

color-managment-best-practices-save-for-web

Embed Color Profile

Should be unchecked. This only adds file size and its irrelevant since we’re targeting sRGB anyway.

Convert to sRGB

This is probably the most important setting in the dialog box. Since we were already working in an sRGB color space it’s not truly converting anything but we need to leave this checked to make sure the exported file has sRGB enabled.

Preview

Should be set to Internet Standard RGB (No Color Management).

And that’s all there is to it. This is our version of color management best practices for web design, but if you have other techniques or examples, we’d love to see them. Please share in the comments below!

HubSpot COS Cheat Sheet

 

Topics: Demand Generation

Christopher Mathieu

About The Author

Christopher Mathieu is the Chief Product Officer at New Breed, where he oversees the creative strategy behind every project we produce. His unique ability to combine his fine art background with his technical web expertise, has led Chris and his team to produce countless sales-ready websites and inbound marketing collateral that actually drive results. His passion is to educate and empower our clients to think more strategically about their inbound marketing needs.

Ready to transform your current marketing + sales teams?  Request a free assessment and get started today. Free Consultation