Color Management

Sketch can render documents in two color profiles — sRGB and Display P3. To make things simple, Sketch uses an Unmanaged color profile by default. This just means that Sketch uses your system’s default color profile — ‘Color LCD’ on a MacBook Pro for example.

Depending on the project, however, you may want to work in a different color profile. The information below explains a bit about each profile and when you might want to use them.

Unmanaged color profile

As previously stated, Sketch documents use an Unmanaged color profile by default. If you don’t want to manage your color profile or your project doesn’t call for it, then you can simply leave these preferences as they are.

You’ll benefit from better performance in the app but be aware that, when you export files, the colors may look different from what you see on screen in Sketch.

If you do need to work in a specific color profile, you’ll be choosing between sRGB and P3.

sRGB color profile

If you’re a web or mobile designer, you’ll probably be used to working in an RGB color profile, simply because this how you express color values in HTML. You might not be used to having to choose your color profile, however, as it‘s usually assigned by your browser.

If it‘s essential that the colors you see on screen in Sketch perfectly match the colors in the final exported files, then you should be using the sRGB color profile.

If you‘re designing for web or for a wide variety of output displays, sRGB is most likely to be the best color space for you — sRGB is a universal standard for displaying colors on the web and all phones and Macs are capable of displaying these colors.

Display P3 color profile

For a long time sRGB was the only color space digital designers needed to worry about. With the recent introduction of Wide Gamut displays, that can render more vibrant colors, this has changed.

This kind of display allows for a much larger number of expressible colors and has led to the introduction of a new color profile, called Display P3.

If you’re specifically targeting devices you know support the P3 color profile and you want to make use of the more vibrant colors available, or if your project is photo or video-heavy then it would be best to work with this color profile.

It’s important to note that if you are not using a Wide Gamut display when creating your designs then you won’t be able to see the brighter, more vibrant colors in a P3 image. This would make it quite difficult to work in the P3 color space so it‘s recommended that you stick with an sRGB or Unmanaged profile in this case.

Remember that you should choose the color profile of your documents based on the final medium on which your work will appear. There’s no need to provide P3 images if you know they will only be displayed on screens with an sRGB color profile.

When to choose a color profile or go Unmanaged

The choice between using a specific color profile or sticking with Sketch‘s default Unmanaged profile will be affected by the project you‘re working on, the intended output and who you‘re working with. Here are some important things to remember.

• If you are designing on a display that has the same color profile as the files you‘re exporting, you will not see a difference on screen between an Unmanaged profile and that color profile. In this case you can simply use an Unmanaged color profile.
• If you are working with a team using multiple Macs and display profiles, picking a color profile may be a good idea to maintain consistency across all those screens.
• On some lower end Macs without a discrete GPU you may find that editing documents in Sketch can be slower when you have assigned a color profile than in Unmanaged mode.

There’s a lot to consider when selecting to use a color profile and then choosing which profile to use. If your project does call for a specific color profile to be used, here‘s how to change it in Sketch.

Changing the default color profile

If you want to work in the Display P3 or sRGB color profiles, you can change the default profile from Unmanaged in Preferences › General › Color Profile.

Note: that when you open a document that has a different color profile to your default, you will get a notification in Sketch.

If you’ve started working a project already, don’t worry, you can also change the color profile of existing documents.

Changing the color profile of an existing document

Changing the color profile of an existing document in Sketch is easy. Just choose File › Change Color Profile… in the menu and select the color profile you want to use.

When you do this you have two options — you can Assign the new color space to your document or you can Convert every color in the document to the new color space. The option you choose depends on how you want the colors in your final image to appear.

Note: that you will probably need a Wide Gamut display in order to properly judge the effects of changing the color profile of a document.

So, when should you Assign a color profile and when should you Convert your document instead?

Assigning a new color profile to a document

When you Assign a new color profile to a document the RGB values are simply translated from one profile to the other. You may notice the colors in your document change slightly but the RGB values will remain intact. Here‘s an example.

Say you‘re working in an Unmanaged or sRGB color profile and you want to change your profile to P3 — if the RGB values in your document are based on a style guide and you know the image will be appearing alongside other P3 content, then you’d want to Assign the new color space to preserve the RGB values of your brand.

Changing the color space from sRGB to P3 is a non-destructive operation — because you’re not changing the underlying RGB values you can convert back and forth as often as you like, with no data loss. This is not the case if you choose to Convert rather than Assign.

Converting a document‘s color profile

When you tell Sketch to Convert your document to a new color space, the RGB values of a given color will change, but when you export the image that color will look the same to the viewer — essentially, the actual color displayed is taking precedence over the RGB values of that color.

Take extra care when you’re Converting a document from P3 to sRGB as the P3 color profile can render brighter colors than its counterpart and colors will generally look duller when Converted to sRGB since the brightest colors are capped.

Note: that Converting back to P3 will not bring this brightness back so you should be totally sure you want to Convert a whole document before you do so.

Here‘s an example of when Converting the color profile of your document might be the best option.

Again, imagine you‘re working in an Unmanaged or sRGB color profile and you want to change your profile to P3 — if you know the image will appear alongside other content that’s not necessarily closely color-matched, and you want to preserve the look of your document rather than the underlying RGB values, then Converting the document is the right choice.

The choice between Assigning and Converting is always a choice between preserving the appearance of the document and the raw RGB values. If you care more about the former, pick Convert. If you care more about the latter, pick Assign.