Colour Spaces and Web Browsers

The Basics

The colour of each pixel on a monitor is defined by mixing together three values which define how much red, green and blue should be shown. But these values don't always match a standard.

It's the colour space that defines exactly which colour is shown for each particular value.

The most commonly used colour space is sRGB, but it unfortuntaely doesn't include the most saturated colours.

Wider colour spaces, like Adobe RGB and Pro Photo aren't always handled in the same way by different software.

More or less RGB

Digital cameras and monitors use additive synthesis, with each pixel a combination of a certain amount of red, green and blue. For the time being, we won't be considering other systems like HSV or CMYK.

For pure white, the three channels are at their maxiumum value, which with the 8 bit colour used by most operating systems and the JPEG format is 255, while all three set to 0 to show black.

The values are always given in the order red, green, blue, so the most saturated yellow is a mixture of maximum red and maximum green, or 255, 255, 0.


The problem is that the colours aren't always standard. We might decide the most saturated green is the colour of a Granny Smith apple. On the other hand, the 'greenest green' might be no brighter than a pine needle, or go as far as the colour of a highlighter.

There's no clear standard for computer mointors. In the photos above, we displayed three circles of red, green and blue on two different monitors, but set the camera up identically in each case. It's easy to spot that on the left, the red is a little lighter, even though the brightness is roughly the same. Both monitors start from the same point, the same numeric value for red.

Colour Spaces

A colour space defines how these values should be interpreted. To compare colour spaces, we usually refer to diagrams produced by the International Commission on Illumination which began to describe the characteristics of visible light as early as the 1930s.  The organisation is usually referred to as the CIE, as an abbreviation of its name in French.

For a red-green-blue colour space, the colours that can be disployed are shown inside a triangular area of the CIE's xy visible colour space (which is shaped like a horseshoe).


There's a snag though: not everybody is using the same combination of hardware and software or the same colour space. The most common colour space is sRGB (in blue above), which has the advantage of working with most systems. But to correctly display a wider variety of colours, designers and photographers prefer Adobe RGB (shown in dark green) or even Wide Gamut RGB (yellow), both of which require more specialist equiment.

That means we need to tell our software what colour space is being used by the output (see inset) and by the image that is to be shown. The software does the necessary conversion from one colour space to the other: a pixel with a given set of values in a certain colour space needs to be displayed in another, so the values will need to be converted so the final colour remains constant.

The majority of photography and imaging software can handle these conversions, as long as the operating system knows what configuration is used by the screen, which is normally specified in its ICC calibration profile. If the OS doesn't know what colour space is being used, then it's normally possible to set up the software manually.

Every photo should also contain the information about the colour space it has been saved with. Some programs include this information automatically (see Bibble 5, right), while in others it's optional. Make sure you tick the right box whenever you're using a colour space other than sRGB, which is the default standard if no other colour space is included.

Most other programs, though, have absolutely nothing to do with colour profiles, and send the values to the monitor without any conversion. Playing video games on a 'wide gamut' monitor designed to be compatible with Adobe RGB or an equivalent colour space can often be a painful experience because the coloiurs are greatly exaggerated.

Web Browsers

There is however one exception: web browsers. Their main job, of course, is displaying web pages, but they often contain photos, and are often designed by professionals. That means they should be able to convert an image from one colour space to another accurately.

There are two typcial examples: a photographer might take a photo using his digital SLR, which supports the Adobe RGB colour space. When he puts it online, he wants the satured tones to be visible. Anybody who visits the site with an sRGB computer, though will NEED their browser to do the conversion, removing the most saturated tones unavailable in sRGB, but preserving the others so the result isn't entirely desaturated.

If, on the other hand, we publish some photos in sRGB on our own site, then anybody with a computer configured for Adobe RGB will NEED their browser to do the opposite, to make sure they don't see an over-saturated version.

So is it possible? Try it and see:

sRGB	Adobe RGB
NTSC	Wide Gamut RGB

These four photos are identical, and only include colours available in the sRGB colour space. Your monitor should display all four in exactly the same way. However, they were saved using four different colour spaces, and if your browser can't handle the conversion, then the Adobe RGB and Pro Photo shots will look duller, while the PAL photos will have a yellowish tinge.

There's no disgusing which browsers are up to the job and which aren't. Take a look at these screenshots-you can move from one browser to the next by hovering over their names:

Firefox 3.6

Internet Explorer 8

Safari 5

Opera 10

Chrome 6

Konqueror 4.4

At the moment, the conclusion is obvious to us: only Firefox and Safari can handle photos with built-in profiles correctly. And we're not sure whether Safari isn't perhaps correcting a little for the warm tones characteeristic of the NTSC space? Then again, we only included it here to make things more difficult: designers never actually use this colour scheme, which was originally designed for transmitting analogue TV.

Bizzarely, neither Chrome nor Konqueror seem able to handle colour spaces embedded in photos, despite using the same rendering engine as Safari ...

The moral of the story is clear: if you spend a lot of time looking at photos online, make Firefox or Safari your default browser. And if you edit your own photos, make sure you always include a colour space when you're not using sRGB. If your software doesn't include this option, then perhaps it's time to change!