Colour management for the web: Should I colour manage my Sketch files?

Back when pretty much everyone was using Photoshop for web design, there was an ever changing debate around colour management. This largely revolved around:

• Should our documents be colour managed? 
• Should our exported assets contain profiles?
• Should we convert everything to sRGB?

For every article evangelising that we should be using colour management there was an equally adamant article claiming that this is evil and would damage the web. The debate around this is confused by intentions. Some articles are aiming to equalise colour across monitors, others want to make sure that exported assets such as pngs, matched colour values set in CSS and others want photos to look as vivid and colourful in browsers as they do in Photoshop. In addition to this, back then colour management in browsers was next to non-existent, adding to the misinformation.

Many of the newer design tools such as Figma, XD, InVision studio and others don't support colour management, and also lack the colour management options found in Photoshop’s ‘save for web’. (Note that Invision Studio has now made the first steps towards this).

As of mid 2018, Sketch now supports colour management. So is this important or should we ignore it? 

For the purpose of this article I’m mainly concerned with making sure that the colour of our exported assets match the colour of our hex values set in CSS. To understand how to do this, we need to broadly understand the concept of colour profiles.

Colour profiles are much more complicated than how I’m explaining them here but you can think of them as the way a screen knows what #FF0000 means and how to display that colour. To understand what I mean by ‘complicated’ please read the articles at the bottom of this one. They explain this in much better detail than my article and I wouldn’t have been able to write this without them.

The main point to understand is that when we set a colour such as #FF0000 this is meaningless without a colour profile. You might as well set the colour to “50 bamboozles”. It's the colour profile of the monitor that converts this into what we see.

So, when you set a colour of #FF0000 in CSS what profile is the monitor using to know what shade/hue/interpretation of red to display? The short answer is that we don’t know for sure because different screens, devices and browsers treat profiles differently. 

According to the W3C, any styling should be set in sRGB. That would include SVGs because colour values are coded and declared within the SVG file. However, not all browsers interpret these values using sRGB. 

So what about assets such as JPGs and PNGs? Again - in true classic web design article fashion: “It depends”.

JPGs and PNGs can contain code within them that tell the browser which profile to use - so in theory if a png contains a profile telling it to display as sRGB, the browser will display that as sRGB. When an image doesn't contain this information, almost all browsers treat the file as sRGB. For this reason, it's common practice to and typically safe to not embed a colour profile to keep the file size small.

If most browsers use sRGB to interpret CSS and SVG values, then it makes sense to colour manage documents. This means that if you open up Sketch and set a hex value, your screen uses the sRGB colour profile to interpret the value into a colour to display. Therefore, the colour you see in sketch should broadly match what you see in the browser which is also using sRGB. It also means that if you save a png with that same hex code from Sketch, the colour should match the one set using the same hex code in CSS - whether it is tagged with a profile or not.

To illustrate why this is important, I’ll use a real world example that we had.

Wide Gamut Displays

One of our designers has a wide gamut display screen. That means that his screen can display more colours than many of the other screens in the studio. When he chose a very saturated red for a design in Sketch but used the hex value in browser, the browser red was noticeably duller.

This was because Sketch was using the monitor's colour profile (set to a wide gamut) so has more saturated reds available, and the browser was using sRGB which wasn't displaying those reds.

When opening up that same Sketch document on other computers who’s screens have a non wide gamut display, the colours were again dulled.

For now (2019), we’ve set Sketch to colour manage using sRGB. Our thinking is that it creates the most consistent colours across browsers and screens. So when choosing a colour in Sketch it’s less likely that we’ve chosen something that most browsers as of today won’t display.

I say less likely because not all browsers colour manage. For example, in Firefox (63) on the Mac, the colour values are interpreted using the screen’s profile. This means in the case of our designer’s red, Firefox displays the saturated colour on screens with a wide gamut profile and the duller red on screens with a sRGB (not wide gamut) based profile. This does however appear to be the exception.
 

This article was posted in Design

• 

  Matt Keogh

  Creative Director