We’ve noticed that Color Management is a topic that often confuses users and so we thought it would make sense to explain what Sketch is doing, and why. Before we can discuss how Sketch handles colors though, it is important to know a little bit about color management in general.
Colors in General
Colors are usually represented as RGB (Red, Green, and Blue) or HSB/L (Hue, Saturation, and Brightness/Luminosity) components. But that’s only half the story. In order to draw an actual color, you need to know which color space those components belong to.
Here’s an idea that might help visualize the problem. Think of all possible colors laid out on chart. Each color space is represented by a triangle upon that surface, with the maximum expressible red in one corner of the triangle, green in the other, etc. So any RGB value basically specifies an actual point inside that triangle. There are a few things to learn from this:
- Not all possible colors can be represented by a color space; anything that falls outside the triangle can’t be represented, even if your display could technically show it.
- Since each color space is a different triangle upon this surface, you can’t express the same colors in every color space.
If you convert a color to a different color space, you’re in effect changing your triangle whilst trying to maintain the same position on the canvas. The RGB values of your color will change as the triangle determines the co-ordinate’s space. There’s also a real possibility that your original color was at the edge of its color space triangle and now falls outside the new triangle. The visible color will have to change slightly to fit back into the new triangle. In short: converting colors between color spaces is dangerous because your colors might look different afterwards.
When it comes to digital design, most designers only think in RGB colors, and not in color spaces. When you specify a color in HTML, you’re only specifying the RGB. The implicit assumption is that the web browser will pick the color space. Safari follows the W3C standard here and picks the sRGB colorspace. The latest version of Chrome however uses your display’s color space and so if you have a unusually calibrated monitor, the same RGB values could look completely different between the two browsers.
When you save an image to disk, you’re in effect writing a big list of RGB values to a file. To make sense of those RGB values, an image will often also include the color space that those RGB values are representing. To save on bandwidth though, many images online have their color profiles removed (that’s what ‘Save for Web’ does) because browsers interpret all images as if they were saved with an sRGB color space – even if they have a completely different color profile embedded! An application like Preview respects the color space that the file was written with though and displays the colors in that color space. So now we have the problem that the same image can look different in Safari, Chrome and Preview. No wonder everybody is confused…
Colors in Sketch
We chose not to burden Sketch with complicated color management support since it would confuse most of the users. Instead, we recognize that the vast majority of our users are designing for the web or for mobile, and Sketch treats colors in a way that makes the most sense for those use cases. After all, everything is sRGB on the web by force, and iOS has no concept of color spaces either.
So what does Sketch do? When you pick a color in Sketch we only store the RGB values. When we render to the screen we interpet those values using the color space of your monitor. This way we can guarantee that if you pick a color from another part of the screen—maybe a window controlled by another application—the values that Sketch stores and displays will look exactly like that color.
When we export an image, we interpret our color values in the sRGB colorspace. We also save the color space in the metadata, unless you have ‘Save for Web’ checked in the export panel. Regardless of that setting though, the intent has been to save with sRGB, which works nicely with Safari as it interprets all images as being saved with sRGB in the first place. If you would also open the image in Preview, it would recognize the sRGB profile and render it as close to Safari as possible. We believe this way we get the most consistent color representation possible.
There is a downside though; if you open your exported image in for example Preview, and put it next to your Sketch window, you might see that the colors are not completely identical. Remember, that’s because when Sketch draws the image in its window, it’s using the screen’s profile, but when Preview draws the image, it may be treating the image as being sRGB, then converting it to the screen’s profile.
Then again, Preview and Safari may not agree either, as one of them will ignore the color profile completely. Also keep in mind that your website may be viewed on an Android device that does not even use sRGB, or on an older iPhone with a slightly different profile.
The takeaway of all this is that getting consistent colors between different images and between images and HTML/CSS is not trivial, but that Sketch makes it relatively easy; if you use the same RGB values in your artwork in Sketch as you use in the CSS on your website, the colors will match (as long as your browser follows the W3C spec, that is).
Sketch helps you by always saving as sRGB, and if you strip away the color space to save a bit of space, it wouldn’t change the way your image is displayed in a web browser. As a web or mobile designer, this is what you would expect, and this is how Sketch works.
Just keep in mind that using the screen color picker to pick colors from various windows cannot possibly guarantee keeping the RGB values consistent.
