Hello guys. After the implementation of figma design my dev returned to me with this bug – colors seems a bit desaturated somehow. I’ve checked it in illustrator screen in attachment (both spaces are RGB). Also have checked Figma app and browser ver – same situation both. How can I maintain this situation in future? Illustrator shows colors exactly as I see it in Chrome after implementation in css.
2 Likes
Hey. Noob here. I’m having the same issue. Did OP ever find a fix for this? Or does anyone know how to fix this inaccuracy? Thanks.
Is there any difference in color space between an app and browser-based ver?
There’s no option to change the colorspace in Figma in the browser. I’m using Safari, looks like sRGB values there. Switching to sRGB in the app makes it consistent between the app and browser for me.
Anyone found a solution ? Same Hex/rgb values works perfectly from Illustrator to Chrome but in Figma when srgb managed appears destaurated
it isnt about consistency across browser/desktop rather the same values produce different results in illustrator versus figma . And when implementing css colors, illustrator is accurate while the figma colors appear desaturated
I’ve been researching this a bit more, and it looks like it has something to do with the P3 color gamut. Figma will be set to unmanaged by default which, if you’re on a Mac that supports P3, should display colors in the P3 space, and everything looks more saturated.
Setting to sRGB is what “fixes” this so you see more muted colors like you typically do on the web.
Now, I’m still unsure how this helps solve the Illustrator issue. In the OP’s case, colors in Figma appear saturated, suggesting Figma is set to unmanaged and displaying P3 colors, and would need to be set to sRGB. In your case, this is the other way around.
Another thing I’ve noticed is that grabbing colors from screenshots in Figma is unreliable. When I take a screenshot of anything on my P3 Mac, the image is saved in the RGB space, and when I drop it into Figma, it appears desaturated. In your example, is the image in Figma a screenshot from Illustrator? If it is, I wouldn’t trust it.
Not sure if this gives you a solution, but hopefully some of the info is helpful in finding one. Cheers!
1 Like
A workaround for the screenshots issue:
thank you for your response. So even if i take a snapshot of an image it looks correct in illustrator and even if i drop it into a browser… but when i drop it into figma it appears desaturated. How is one suppose to work with this discrepancy ?
I believe this is a Figma-specific problem. My screenshots look just fine in Preview or anywhere else really, but then when dropped into Figma it gets desaturated. If you have Photoshop installed, perhaps try the solution posted by @Joshua6 above.
@Arman_Matin Yep, that’s the crux of my issue. Any screenshot taken on my Mac gets desaturated when imported into Figma. It looks fine in Illustrator, Photoshop, Preview.
so how do you present from Figma to your clients ?
Seems like it was fixed somehow. My monitor color profile:
+same in Figma app.
In that moment when I created this thread I have used Figma from Chrome, since that time I switched to Figma app itself and upgraded to macos Ventura. For now in comparison between Chrome Figma vs Illustrator + Figma App vs Illustrator colors looks equal in both scenarios. I literally done nothing for that, invisible magic have fixed everything lol.
1 Like
I’ve experienced something like this, but I’ve handled it well.
how to deal with slow figma, even though there isn’t much content? anyone know how to solve it? I need help
Hi, I just bumped into the case that Figma incorrectly convert hex to hsl, it rounds numbers. We noticed this in browser.
#5b5c64(base color) → hsl(233.33deg 4.71% 37.45%) (checked in browser)
&
hsla(234, 5%, 37%, 1) (Figma converted hex color) → #5a5b63
Maybe your issue is similar
1 Like
The fix that worked for me, was to set Figma colour space from sRGB to Unmanaged, as mentioned above.
So that’s Figma > Settings > Color Space > Unmanaged
Thanks everyone!
Hi! The problem is that we should check in Illustrator or Photoshop the option to show only web colors in the color palette and we are seeing the colors incorrectly. By selecting that option we will see new color codes that will work fine in Figma.
I have not been able to work through the desktop application since update that brought “Change color profile” feature. On the left are the colors in the browser, they look as they should, and on the right are the colors in the application. I’ve changed color profiles in Figma, changed monitor color profiles. No matter what i try to do colors are still wrong. There are no such problems on my windows laptop, but there are on my PC.
1 Like