Colour management and UI design
Most people who design web sites or apps in Photoshop will, at one point or another, have had issues trying to match colours in images to colours generated by HTML, CSS or code. This article aims to solve those problems once and for all.
Colour management attempts to match colours across devices
In the printing world, colour management typically involves calibrating your entire workflow, from scanner or digital camera to computer display to hard proofs to the final press output. This can be quite a tall order, especially when the devices use different colour spaces — matching RGB and CMYK devices is notoriously hard.
When designing or editing for TV, it’s common for the main editing display to be calibrated and for a broadcast monitor to be used — these show a real time proof for how the image might look on a typical TV in a viewer’s home.
In those scenarios, colour management offers many benefits and is highly recommended.
When building web and application interfaces, the situation is a little different. The final output is the same device that you’re using to create the artwork — a computer display. (Please ignore the differences in gamma between Windows, OS X prior to 10.6 and the iPhone for now, as these are covered later.)
There is a catch though. Even though you’re creating your web or app interface on the same device the final product will be shown on, there’s various sources for colours: images (typically PNG, GIF and JPEG), style markup (CSS) and code (JavaScript, HTML, Objective-C etc). Getting them all to match can be tricky.
The goal
When designing websites or app interfaces, we’d like to perfectly match the colours displayed on screen in Photoshop and saved in files with what’s displayed in other applications, including Firefox, Safari and the iOS Simulator. We want the colours to not just look the same, but the actual values saved into files to match the colours we defined in Photoshop perfectly.
Colours can not shift or appear to shift in any way, under any circumstance.
Why is this so difficult?
Photoshop applies colour management to images displayed within its windows and also to the files it saves. This is a bad thing if you’re working exclusively with RGB images that are for web or onscreen UI. With the default Photoshop settings, #FF0000 can display as #FB0018 and #BB95FFas #BA98FD. The exact values will depend on the display and profile you’re using, but differences definitely exist with the default Photoshop settings.
How does Photoshop’s colour management differ to colour management in OS X and Windows?
OS X’s colour management is applied to the entire display at the very end of the processing chain, after the main buffer in video ram. This means that although colour management is being applied, software utilities that measure colours on screen (like/Utilities/DigitalColor Meter) will still report the same values as you saved in the file or entered into your code. I believe the colour management in Windows Vista and Windows 7 (Windows Colour System) works in a similar fashion.
Photoshop’s colour management is applied only to the image portion of its windows and to the files it saves. This colour correction happens as Photoshop draws the image on screen, so software utilities that measure colours on screen often report different colours to the ones you specified. It’s worth noting that OS X’s colour management is applied on top of Photoshop’s.
The best solution I’ve found is to disable Photoshop’s colour management for RGB documents as much as possible. Doing so forces RGB colours on screen and saved to file to match the actual colour value. If you need your monitor to be calibrated a specific way, then you’ll be best served by changing it at an OS level for web and app design work.
Disabling colour management used to be quite easy in Photoshop CS2 and all versions prior, but now requires a little more skill.
Disabling Photoshop’s RGB colour management
These instructions are for Photoshop CS4 & CS5 on Mac and Windows. Setting up CS3 is very similar.
Step 1 — Choose Edit > Color Settings and set the working space for RGB to Monitor RGB.
Step 2 — If you’re using Photoshop CS6, click More Options and turn off Blend Text Colors Using Gamma, because it changes how non-opaque text is rendered. It should already be off, but if it’s not, turn off Blend RGB Colors Using Gamma as well.
Step 3 — Open a document and choose Edit > Assign Profile, then set it to Don’t Color Manage This Document. This must be done for every single document you work on.
Step 4 — Ensure View > Proof Colors is turned off.
Step 5 — When saving files with Save For Web, ensure Convert to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed Color Profile (there are some cases where you might want this on for photos, but chances are you’ll want it off for interface elements and icons).
The difference between “Assign Profile” and “Convert to Profile”
Now might be a good time to mention the difference between “Assign Profile” and “Convert to Profile” so you’ll know when to use the appropiate function.
Each Photoshop document contains a colour profile that’s separate to the actual colour data stored for each pixel. “Assign Profile” simply changes the profile in the document, without affecting any of the colour data. It’s a non-destructive action — you can assign a new colour profile to your documents as often as you like without any fear of doing damage. Assigning a new profile may change the way your document appears on screen, but the data contained in the file will be unaltered.
“Convert to Profile” is quite different. It not only assigns a colour profile to a document, but it tries to keep your image looking the same on screen. It does this by processing the colour data contained in the file for each pixel. Converting to a new profile is more likely to maintain the way your document appears on screen, but the data contained in the file will be permanently changed. Use with caution.
If you’re copying layers from one Photoshop document to another, it’s a good idea to ensure both documents have been assigned the colour profile.
Illustrator is the same as Photoshop
If you’d like images saved from Illustrator or imported from Illustrator to Photoshop to match as well, then follow the steps below. These instructions are for Illustrator CS4 & CS5 on Mac and Windows. Setting up Illustrator CS3 is very similar.
Step 1 — Choose Edit > Color Settings and set the working space for RGB to Monitor RGB.
Step 2 — Open a document and choose Edit > Assign Profile, then set it to Don’t Color Manage This Document. This must be done for every single document you work on.
Step 3 — Ensure View > Proof Colors is turned off.
Step 4 — When saving files with Save For Web & Devices, ensure Convert to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed Color Profile (there are some cases where you might want this on for photos, but chances are you’ll want it off for interface elements and icons).
Gamma differences
Windows has used a gamma of 2.2 since its introduction. OS X has used a gamma of 1.8 for all versions prior to Snow Leopard. Snow Leopard, Lion and Mountain Lion all use a gamma of 2.2. What does this mean? Before Snow Leopard, web pages looked darker on Windows. Thankfully, both operating systems are in sync now, so the same web page design should look very similar on a Mac and a PC that are using the same monitor.
Information about the iOS’s gamma is a little hard to come by, but I believe it’s 2.2. This is one of the reasons why it’s also a good idea to test your interface on an iPhone or iPad.
Device testing
There’s a good chance that your iPhone, iPod or iPad’s screen will look different to your computer’s display. Screen types, warmth of colors and even sub-pixel patterns vary greatly, so you will probably want to tweak the design after seeing everything in situ. Some display types, such as AMOLED, can appear far more saturated and with much higher contrast than typical computer LCDs. Not to mention, seeing your design on the device is exciting.
There are many ways to get your final mockup onto a mobile device. We weren’t happy with the options available, so we built our own tool for the job. Skala Preview lets you view realtime design previews on your device, as you edit in Photoshop. Previewing your design in situ lets you test tap sizes, text sizes, colour, contrast and ergonomics, all at a time where changes can be easily made — during the design process. It closes the loop, meaning you can iterate faster to a better final design.
Handy tools for Mac users
On Mac, moving colors between Photoshop and code can be made easier withDeveloper Picker, Hex Color Picker and Colors (all free).
Conclusion
You’ll now be able to move bitmap and vector images between Photoshop and Illustrator without any color shifts at all, using any method. You’ll also be able to use the color picker in Photoshop to grab a color, then use the same HEX color value in your CSS, HTML, Javascript, Flash or Objective-C code and it’ll match your images perfectly.
I hope this article helped. If you have any questions then feel free to ask us via Twitter.