What is a color profile?
Color profiles describe how the colors in an image should be rendered, which helps maintain accuracy across different screens. Designers may often think of colors as numbers across a scale: for example, white is 255,255,255— the maximum amount of light adds up to white. However, it’s not as simple as that when you take into account that every display is different. As technology improves, displays are able to show darker or brighter colors — what does “white” even mean? Color Profiles help ensure consistency across different displays — think of them as a way to match numbers (0-255, for example) to colors in the real world. They help ensure that, as much as possible, colors look the same across every screen your content appears.
Color Profiles are attached to images and applications use them to interpret the numbers in the images into visible colors. Therefore, it matters what color space you’re viewing the document in to ensure accurate previews, as well as what color space is attached to the image to ensure that the destination application (a web browser, for example) has the right information to interpret the image.
Depending on your project, you may want to work in a different color profile. Here’s what each profile is best for and when you might want to use them.
Unmanaged color profile
To make things simple, the Mac app uses an Unmanaged color profile by default. This just means that it uses your system’s default color profile — ‘Color LCD’ on a MacBook Pro, for example. 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 Mac on older machines app but be aware that, when you export files, the colors may look different from what you see on screen in the Mac app depending where you view them. When you export images in an Unmanaged document we will tag the exported images with the sRGB color profiles to ensure consistent display across different applications and devices.
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 designing for web or for a wide variety of output displays, sRGB is most likely the best color space for you. Every modern web browser follows the W3C standard and uses sRGB as its color profile. All phones, Macs and most screens are capable of displaying these colors, so it’s a good baseline that will give you consistent colors across most devices.
When you export images out of a document in sRGB they’ll have the sRGB color profile attached as well.
Display P3 color profile
For a long time sRGB was the only color space digital designers needed to worry about. With the 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 Display P3 color profile (like all modern iPhones) 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 yourself when creating your designs then you won’t be able to see the brighter, more vibrant colors in a Display P3 image. This would make it quite difficult to work in the Display P3 color space so it‘s probably a good idea that you stick with an sRGB or Unmanaged profile in this case.
When you export images out of a document in P3, the exported image will have the P3 color profile attached as well.
Remember that you should choose the color profile of your documents based on the final medium on which your work will appear. P3 is not inherently better than sRGB because it’s newer or describes a wider gamut of colors. Choose your color profile on the output medium above all. For example, it wouldn’t be right to provide P3 images if you know they will only be displayed on screens that can display nothing wider than the sRGB color profile. This is especially important if you are working on a P3 capable machine because you will be disappointed when you see the images used in the final product if you don’t use the right color profile.
When to choose a color profile or go Unmanaged
The choice between using a specific color profile or sticking with the Mac app’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 the Mac app can be slower when you have assigned a color profile than in Unmanaged mode.
There’s a lot to consider when deciding if a color profile should be used 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 the Mac app.
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 › Canvas › Color Profile.
Note: When you open a document that has a different color profile to your default, you will get a notification in the Mac app.
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 › Document Settings… in the menu, then select the Canvas tab and pick 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.
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, we’ll keep the same RGB values from one profile to the other. You may notice that the visual appearance of colors in your document changes slightly – especially the brighter colors. However, the RGB values will remain intact.
Say you‘re working in an Unmanaged or sRGB color profile and you want to change your profile to Display P3. If the RGB values in your document are based on a style guide and you know the image will be appearing alongside other Display 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 Display 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 ask the Mac app to Convert your document to a new color space, the underlying RGB values of a given color will change but the output will look as similar as possible on the Canvas and of the exported images 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 Display P3 to sRGB as the Display 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: Converting from sRGB back to Display P3 will not bring this brightness back so you should be really 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 Display 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 Assign and Convert 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.