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. 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. However, please keep in mind the technique is only 99% accurate, and for some unknown reasons, the internet gods may still shift some colors by tiny amounts. Luckily, these shifts will be subtle enough that the human eye can't really see a difference (even with big blocks of fill)!
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. 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.
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.
2. Save for Web & Devices Settings
One of the great things of 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.
Embed Color Profile
This should be unchecked. It 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.
This 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!
For more web design best practices, download our guide to learn the steps needed to successfully launch a full website redesign project:
Topics: Website Strategy