Not logged in. Log in.

Colour Profiles, Wide Gamut and Websites

by Darkademic in Web Development   1 comment

A while back, I searched for some guidance on this subject, and whilst there are plenty of articles discussing colour profiles in general, and a few on their applicability to web design, none of them really answered all of my questions so I had to do some experimentation.

Colour profiles are something which graphic designers are most likely already familiar with (and if not, they should be). Web designers on the other hand, have probably never had much experience with them. They are basically little pieces of information which are attached to image files to tell the monitor (or other device) how to display the colours used in the image. This is necessary to achieve consistency across devices which may display colours differently to each other.

In the past, this was primarily relevant to graphic designers producing print work, as the same colour value often appears significantly differently on a computer screen compared to on paper or other materials.

Web design only deals with screens, so until recently this meant colour profiles were of little concern. With the introduction of so-called "wide gamut" monitors however, colour profiles are becoming increasingly important because wide gamut monitors can display a wider range of colours than standard gamut monitors. For example, the colour hex value #FF0000 means "the most saturated red possible" to the monitor. Since wide gamut monitors can display a greater level of saturation, this same colour value will look much more saturated on a wide gamut monitor compared to a standard one.

In practical terms, this means any images created using a standard gamut monitor, which have no colour profile embedded, will look substantially more saturated on a wide gamut monitor. Conversely, images created on a wide gamut monitor, with no colour profile embedded, will look substantially less saturated on a standard gamut monitor.

It is only by embedding correct colour profiles that one can achieve consistency across monitors with different colour gamuts. For websites, the only colour profile you should really be using is sRGB (standard RGB). sRGB can be displayed by both standard and wide gamut monitors, and so covers all bases.

Most of the above information is easy to find on the Internet, as well as information on how to properly calibrate your monitor and how to actually embed the colour profiles into the images you create. What I've been unable to find, is information about the relationship between colour profiles and colours on websites; particularly those defined using CSS.

Since CSS uses actual colour values, such as the bright red mentioned above, and since there is currently no way to attach colour profiles to CSS stylesheets, colours defined by CSS are inconsistent across monitors. The latest Internet browsers do have colour management built in, however it does not seem to apply to CSS, only to images.

With this in mind, using sRGB colour profiles in images will cause issues on wide gamut monitors (such as my own). Any images which have to work seamlessly with CSS colours, for example a gradient background which fades into a particular colour, will be noticeably incorrect, particularly if the colours are saturated. The only solution then, is to not embed colour profiles in any such images. Images which are separate from the design of the website, for example photographs, can be given an sRGB colour profile, but any images whose colours have to match the CSS can not.

I'm unsure as to why so few people have encountered this problem or suggested solutions for it, but there you go. Perhaps it will be noticed when more people have wide gamut monitors which include only the most expensive models at the moment (upwards of £500 in most cases).

Comments (1)

Destrie (Guest)
6 years ago
Halllejauh! I needed this-you're my savior.

Comments on this entry are now closed.