Disclaimer

If you – like me – are having problems reproducing identical colours between Photoshop and your web browser this post provides a solution.

This post does not concern itself with best practices for printing techniques and managing CMYK colour palettes. I’m primarily a web designer, so settings for print don’t concern me. That said, if you are a print designer you’d still benefit from reading this article, especially if you haven’t come across the term sRGB before.

I’ve tested on a PC running Windows 7 and Adobe CS4, using Photoshop. I can’t guarentee these guidelines will work on other platforms and/or Adobe applications. If you’ve used the following method on another platform and had success with it please drop a comment in below – thanks!

The my colour reproduction problem

This evening a realisation occurred. Something I haven’t deemed that important in a while (not since dealing with traditional CMYK print work) came back to bite me: I learned to manage my colours in Adobe Photoshop.

Firstly I will set the scene…

Generally – up until now – I tend to use the default Photoshop settings. If the end output looks imperfect I will play around inside the colour settings until I’ve rectified the situation (yep, I’m a total professional). This was until yesterday when the aforementioned strategy, disappointingly for me… failed.

The straw that broke the camels back today, for me, was spending £80.00 on stock photography only to find my beautiful grass trounced to a vivid, high contrast, almost luminous green amongst the plethora of browsers installed on my machine.

Note

You will find numerous online articles complaining of the opposite effect – colours being ‘drained of their vibrancy’ etc. but seen as I’m *special* I discovered the same problem ‘arse to front’. You will also shortly discover that this colour management discrepancy is hardware, platform, and browser-independent. No Adobe or Microsoft bashing here please – it’s your responsibility to configure your own settings.

It’s your responsibility to configure your own settings.

Weirdly, everything I could view the exported image in outside of a browser appeared as intended, including Windows Photo Viewer and similar applications on my Mac:

Screenshot comparing Photoshop with browser output

The correct image file type for the job

Firstly it’s worth noting the types of image files you should be using when publishing to the web (accounting for file size, image quality, and device support):

.gif – best option for graphics using flat colour without gradients.

.png – best option for graphics using flat colour with gradients.

.jpg – best option for a plethora of mixed colours and gradients, such as photographs.

Obviously there are exceptions to these simple rules, but I find them appropriate 9 times out of 10.

sRGB fo’ sheezy mah neezy

Notice I mentioned ‘device support’ above – strange in this context I know. When I first started reading about sRGB and saw the words ‘support’ and ‘device’ I slouched in my chair.

As a front-end developer I’ve spent approximately half my professional career catering for software and hardware compatibility issues in an attempt to offer the end-user an ‘optimal experience’ irrespective of their individual set-up. My current CSS-quirks list is long enough without having to tag ‘cross-browser colour testing’ on the end. Thankfully my initial, slouched (but cosy), reaction was unfounded.

The transformation of the scattered measurement data into a more regular form, usable by the application, is called profiling. Profiling is a complex process involving mathematics, intense computation, judgement, testing, and iteration. After the profiling is finished, an idealized color description of the device is created. This description is called a profile.

sRGB has the narrower gamut of colours, effectively making it a subset of aRGB. The mighty Ken Rockwell will contest this explanation, however it makes sense to me so I’ll run with it.

aRGB vs. sRBG colour comparison

Some older devices, including your average consumer hardware monitor, may be unlikely to support the wider gamut of colours which make up aRGB, making it a sensible approach to adopt the widely supported sRGB gamut for all web imagery – something Ken Rockwell and I do agree on. Some people have coined the term ‘s(safe)RGA’ for this very reason.

We are able to control these colour profile settings in Photoshop via ‘Edit > Colour Settings…‘. If you’re saving images to the web these are the correct settings you’ll want to adopt as part of your (new) work flow. Unless you’re a colour expert, I would expect it’s unlikely you will need to drill down and manually configure settings; making do with one of the Photoshop pre-sets (‘Settings‘) instead:

General purpose 2

Prepress 2

Web/Internet

Monitor colour

If you’re exporting imagery for the web ‘General purpose 2‘ is the setting you will need, although I have read alternative opinions on why completely disregarding sRGB, gutting all colour profiles, can yield amicable results.

If you’re exporting imagery for the web ‘General purpose 2′ is the setting you will need.

If you’re thinking of using this alternative approach, then I strongly recommend you read this thread on the Adobe forum. The gist of the discussion is that not assigning a colour profile may well give you identical images on your set-up, but it will likely result in inconsistencies for other users with different set-ups (monitors, software browsers etc.).

Attention

I haven’t yet had time to find specifics on how each and every browser handles colour profiles. If you know of such resources on the web please let me know about it!

Note

You will need to restart Photoshop for any new settings to take affect.

Screenshot of Photoshop sRGB colour settings

The perfect colour work flow for web

Disclaimer

The following work flow information relates to exporting image files via the ‘Save for Web & Devices’ command in Photoshop (CS4). If you’re using the ‘Save as…’ command to export images for a web browser you’re a buffoon.

By this point I hope I’ve communicated the importance of working with a defined colour profile. Assigning a colour profile and managing this on a file-by-file basis is being responsible, and means you stay in control.

To make sure you always know what’s happening deactivate all ‘Colour Management Policies’ and check ‘Ask When Opening’ and ‘Ask When Pasting’ for when missing and mismatched profiles occur. In which case you should either choose to keep the profile or to convert it to your working space (depends on what you want to do).

This means we now receive notifications when anything differs from sRGB, our working profile of choice:

Screenshot of Photoshop Colour Management Policy notifications

Going back to my original example: now being notified that the grass photo I’m importing has an embedded colour profile of aRGB I can choose to ‘Convert document’s colours to the working space’ (being sRGB) and begin editing colours. When I come to export the image file for browsers I will know from the very beginning I’ve been working with the same sRGB colour profile and my image will be identical for the end-user on their chosen device.

There’s no need to mention image file types [here]. It’s a separate issue which doesn’t – and shouldn’t – concern itself with colour reproduction. After all .gif, .png, and .jpg all support sRGB.

Proof Setup

There’s no substitute for testing the end result as often as possible during your design phase. If it’s a crucial colour to get right, like this grass colour was for me in my example, then it’s worth knowing if you’ve gone wrong early on.

The ‘Proof Setup’ and ‘Proof Colours’ settings allow you see the fruits of your chosen colour profile then and there inside Photoshop; in theory without having to export and test your image files:

How to proof your colours in Photoshop

Note

You will potentially need to update these setting every time Photoshop opens, and additionally every time you begin working with a new image, so stay frosty with this. Annoying I know, but I haven’t yet found a default setting option in Photoshop. If you know of one please enlighten me.

I have chosen the setting ‘Proof Setup > Monitor RGB‘ because I know my monitor is using the same colour profile standard – not rocket science. Now you understand why owning a good quality monitor helps if you rely on faithful colours.

3 Responses to “Taming Adobe colour settings for your web browser”

Thanks for linking to your post, very interesting. I will take on all your advice and change my color spaces and remove any automated functions that systematically screw over any chance of knowing what on earth Adobe is doing with your colours.

However, I have followed numerous and extensive colour-setting posts and forums out there for Photoshop (im on CS4 at the minute), and I challenge anyone out there to create a setup that allows for a .png (saved for web) from Photoshop to exactly correlate with the hexadecimal values created by the browsers…there always seems to be an exception to the rule, so in an obscure version of IE or an old version of Safari or Firefox, someone’s hexadecimal colour, somewhere, my Adobe .png export will be dodgy.

My only solution so far, is to export it from Fireworks…because it natively works in pngs, it seems to have a high success rate of exact colour/hex matching.

One day…one day, Adobe will default set up their systems so we don’t have to keep guessing what’s going on!

You might want to clarify: are you ‘converting to sRGB’ or ’embedding ICC profile’ when you export? I find sRGB workable (with ‘Proof Colours’ enabled and a good monitor), but with those two settings on the whole thing becomes a mess. Of course, many (many) people disagree with me and regularly tell me.

You link to the Adobe thread at the bottom, but the users in that thread seem to assume the profiles are embedded – that’s the only way to avoid ‘inconsistencies’ between machines – true, because it allows your device to retranslate the image to faithfully show colour, despite your monitor set-up.

However, embedding profiles creates inconsistencies between your images and the background colours in your design, which for a web designer is a much bigger problem. This is the big rift I had with Photoshop people – would you rather have:

a) ‘correct’ colour, or;

b) have colour that matches your design and behaves consistently within a device’s colour range?

NB The above solution works with – effectively – any random photo from the web, with its (often) unknown embedded colour profile.

If you’re screen-printing (screen-shooting) from the web in order to accurately copy some colour values (e.g. #hex values) – providing you have the configuration settings I’ve outlined above – I recommend selecting “Convert document’s colours to the working space” instead of ‘Discard the embedded profile’.