Dull Colors in Affinity Designer; Oversaturated colors in Figma

[Andrej]

Hello everyone,

I have a question regarding color spaces. I work in Figma and Affinity designer for some time now. Figma uses sRGB, Affinity does so too - document set up and preferences. Still the colors are really different in both apps. I imported a PNG I did in Procreate to Figma and to Affinity (1). The colors are very different. I created vector tracings of the png and copied them over to Figma again (2). The colors are apparently the same but are being interpreted differently by both softwares, see attached file.

Can you help me to make the colors in both applications consistent?

BR,

A.E.

 

PS: I'm experiencing this in Affinity Designer 1 and Affinity Designer 2 which I'm currently testing.

 

[lacerto]

According to what is stated here:

https://help.figma.com/hc/en-us/articles/360039825114-Color-management-in-the-desktop-app

...then if you use the desktop app version of Figma, then the environment is by default unmanaged. Which means that you would get whatever you see in full display gamut. That means that if you have e.g. sRGB+ capable display (a display that can show wider gamut than sRGB), you would typically tone down colors a bit to not have oversaturated images. But if you save such file unmanaged (without an embedded color profile), and open it subsequently e.g. in Affinity apps, which by default assigns an opened unmanaged image an sRGB profile, you would typically see dullened (a bit desatured) colors. Conversely, if you create a document in an Affinity app, you would by default have an sRGB profile as the document color space, and that profile also embedded in the file (if not opted out). If Figma desktop app is in unmanaged state, it would most probably discard the profile and show the sRGB in full display gamut and what you'd see is more saturated colors than when working with Affinity apps. According to what is mentioned in the referred document, you can turn on color management also in Figma desktop app, in which case sRGB profile will be used.

If you instead work with browser version of Figma, you should have automatically color managed environment (sRGB) turned on (and probably cannot turn it off), and accordingly should not experience this issue.

[Andrej]

Thank you for your extensive reply. Yes, I'm using Figma in desktop mode, unmanaged color space. I followed the link and tried to turn on the sRGB profile for Figma, but no success. Apparently this option is not available for me yet (Win 11, 64bit). Is there a way to disable color management in Affinity Designer instead? My top priority is to have consistent colors between these applications. Colors being rendered a bit too saturated is not that big of a deal for me.

 

[lacerto]

2 hours ago, Andrej said:

Is there a way to disable color management in Affinity Designer instead?

Basically no, but if you have a display profile for your monitor, you can assign that to any file that you open in Affinity apps to have identical appearance between the apps. So after you have opened the file, go to File > Document Setup > Color (in Publisher or Designer), or Document > Assign ICC Profile (in Photo), and in the former, make sure that you use the Assign option and then select your display color profile, or closest that matches your display gamut (e.g., if you have wide gamut display, you could try Adobe RGB or Display P3).

Below on the top row I have assigned the two PDFs that were exported from Figma and opened in Designer v1.10.6 my laptop calibrated display profile. The bottom rows have the default sRGB color profile automatically assigned, and as can be seen colors are duller than when you edit them in Figma unmanaged (using the full gamut of your display). (Note that on the forum colors are mapped to sRGB so here the "bright" colors are mapped to the edges of sRGB and the "dull" colors appear yet more desaturated.)

You could of course make your display color profile the default RGB color profile in the Preferences > Color to have an Affinity app automatically assign your display color profile to unmanaged opened files, but it is probably better to leave it to the default and then just assign the profile per file.

I did not test what happens if you export your fifes from Affinity apps with ICC profile embedded, but basically you should not embed the profile. But as the desktop app runs in unmanaged color space, it obviously just discards / ignores any profile and accordingly shows the color values as they are.

EDIT: Note though that if you want to share your files with other people, then you should embed your display ICC in the files so that other people see the colors similarly as you do (provided that they have a kind of wide-gamut display as you have).

EDIT2: Depending on the final target of your designs, it might actually be the best option to use the browser version of Figma as it displays the colors in sRGB, and then use the default sRGB also in Affinity apps. You would get identical colors in both environments, and the audience is then also likely to see colors as they were designed (since majority of displays are only showing colors within sRGB, or narrower color space).

[Andrej]

Wow, you are putting so much work into your responses. Thank you very much! Can I add some tags to this topic to make it easier to find it for others having the same question?

I think I will use Figma in the browser from now on, at least on my Windows machine. I also have Figma on my Macbook from work, there I can set the color space to sRGB. I intend to use the designs in Godot. Godot also uses sRGB color space, so I agree that it is better to just go with sRGB.

The custom profile work around is very inventive!

[Andrej]

A little update: Figma HAS the option to change to sRGB color space on Windows. But it is hidden in the other preference menu the top right corner. But there is a bug I want you, the future reader, to know about: The modes are swapped! Unmanaged means sRGB and the other way around. This bug has been around for some time it seems:

https://forum.figma.com/t/windows-desktop-version-color-space-problem-please-help-me/1372

BR,

Andrej