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

Written by Matt Keogh on 31st January 2019

2 comments
Browser screen shots taken on same screen but different browsers showing colour variations

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.
 

Colour test screen shot
Screen shot taken on Chrome showing different images against a background of #FF0000. I've manipulated this image to show what it looks like on a wide gamut display.
Screen shot from Firefox
Screen shot taken on Firefox showing different images against a background of #FF0000. I've manipulated this image to show what it looks like on a wide gamut display. - Note how this shows everything with a higher saturation

But what does it all mean?

Different settings such as brightness, contrast, the natural light in the room and different colour profiles mean that you’ll never get colour to be totally consistent between screens. However, as most screens use a sRGB based profile, and most browsers interpret colour values using sRGB, setting your design tools to use sRGB will create more consistent colours between the original design and what is displayed in the browser, as well as the colours in the generated assets (pngs) and colour values set in CSS and HTML.

However, looking to the future there might be ways to take advantage of wide gamut displays. There might be a case where you really want to use that saturated red, or have product images that heavily rely on accurate colour representation. As web designers need to be more aware of this than ever before.

Further Reading

  • Colour management settings  - A much deeper explanation than my article and I highly recommend reading this one. It also contains important information about settings when exporting from design tools and which design tools support colour management. Many thanks Marc for your help :-)
  • Improving colour on the web  - Webkit’s approach to colour management and how to take advantage of wide gamut displays.
  • Color Shifts on the World Wide Web  - Explaining why colour might look different in Photoshop to in the browser.
  • Tweet by Karri Saarinen  - Tweet showing the colour shifts between browsers on the same screen. Also where I got the main image for the article from.

This article was posted in Design, Musings by Matt Keogh

  • Matt Keogh

    Matt Keogh

    Matt is our Senior Designer who is perfect at pixel placement. At the weekend he likes to kick back, watch a film or two and spend time with his family (or so he tells us!). @matsaukeo

Comments

Great stuff! Let’s spread the word as far and wide as possible. This is such critical information for designers and developers to know.

Marc Edwards05/02/2019 00:22

Thanks for the kind words Marc - and for your informative article that made things much clearer for me

Matt Keogh05/02/2019 09:02

Post a comment

*
*
You are currently offline. Some pages or content may fail to load.