Color Management (set color profiles)
XD should be a color managed application.
I'm not sure what the full context of color management is within the UI/UX industry is, or if it's something that many pay attention to, or if it's just left un-managed.
Currently a vast majority of designers are using high gamut displays to design. Our final output will however differ greatly without some proper color management implemented. If color managment is implemented, we can at least visually soft proof our design and colors to specific devices (ie: New iOS devices that support P3 color gamut), or older sRGB devices.
At the same time sRGB images used won't expand to the display's high color gamut, making them look over saturated.
(Currently using Windows Beta Version: 0.6.8.6)
Problem: No color profiles and therefore wrong color display:
- Colors look off.
- My brand-red #DC0000 especially.
- When I show someone a design on screen everything looks different than it will in the browser
- Looking at wrong colors is a major problem when designing.
- I create a square with the color #DC0000 in Adobe XD. Then export is as a PNG. Open the exported PNG in Chrome and Photoshop. And look at it in the Finders small file preview.
- I then look at it AND meassure the color with macOS "Digital Colour Meter" all 4 places. It looks and meassures the correct color-value #DC0000 everywhere except in Adobe XD where it's #EE0000 instead, which is a lot more saturated.
- The problems is the same when working on my MacBook Pro retina screen and my external retina non-Apple screen.
This is not funny at all. Please look at the difference in the attached image. Left is browser right is XD. http://prntscr.com/r6d7bp Here I am all happy about the colors I am using in XD and my customers are screaming at me for "wrong" color choices.
Here's a simple test, on the left is XD and on the is chrome, the colors are exactly 100% the same using the same monitor. If I put XD on the retina XD uses that gamut and so the color changes a bit. Maybe the XD engineering team didn't catch this, but the solution should be a pretty simple one because trying to color-manage XD or Sketch or Figma or any other tools of like would be a pretty monstrous task.
All browsers, just stick to the normal sRGB, if XD is allowed to use that gamut instead of the mac's gamut then it would be great. to do a quick test, see the color difference between the retina and an external monitor such as a dell or lg for instance, the color instantly changes to what all browsers show because the profile used in an external monitor uses a different more universal gamut. XD should not use the native color space, it should use a common sRGB gamut like all browsers.
I use an ultra sharp dell wide monitor and as soon as XD is placed in that screen, the colors are exactly the same as in any browser.
The main issue is not XD itself, the problem is that browsers are not color managed, Chrome for instance does not use an ICC profile, which macs do use and XD uses the native architecture. The solution I can think of is to allow XD to be able to toggle on or off using native ICC from any system. I am no engineer of course, but I do believe that would help. Also, correct me if I'm wrong, but I believe the only color-managed browser is Firefox, which, if you use firefox and color manage it, you get a bunch of weird results.
One last thing, Sketch is not color-managed, actually there is no UI/UX software that is actually color-managed. It doesn't need to be unless all browsers go in that direction, then the software needs to be able to match.
Stu Nami commented
I have a theory on why this doesn't have 1000's of upvotes. No real professionals are using XD. They all stay on Sketch. I live in the bay and I am noticing hardly anyone knows about Adobe XD or what it does. Sketch rules here. The main reason is we designers can't work on wide gamut displays and design with XD. No color management makes the web style guide feature a joke. Why can't Adobe copy and paste the existing color management from Illustrator?
It is suffering to keep making things that are different from real.
Thomas Maier commented
I need the possibility to color manage SVGs. It's really important since browsers interpret image data differently, when they lack a color profile. E.g. Firefox uses the maximum of the display's color space while Safari uses the active display color space. Images on websites therefore can look very different when exported with XD right now.
This is an absolute necessity. Makes working on a wide gamut display impossible. As long as this is not getting fixed I am stuck with Sketch.
David O commented
I can only echo the comments below. Adobe is certainly not ignorant to color management. What I find baffling is that their own internal users and advocates would be satisfied with this condition. Wide gamut screens and display are certainly more prevalent than ever in the design community. My workflow is currently to tune all colors in wide gamut display and then manually color select and map to sRGB equivalents to get as close as possible (obviously not completely possible given sRGB color space vs others). Alternatively I guess I could start working on a sRGB only screen for Adobe XD specific workflows
Our design team creates on a mac. I open on a PC (Windows 10) and it is always under-saturated for me. Really frustrating.
At a minimum, you need to implement a CMS engine equivalent to a web browser.
Hope to update and fixed soon!
It's really a terrible problem!!
Terrible to work with!
Kevin Lorca commented
A Complete nightmare please fix this!! @AdobeXD
We need this asap, newer Macs display higher/wide range of colors and this makes it look too saturated in XD due to lack of color management. This problem will probably affect more and more people until it's fixed.
Today I switched from the old iMac 2012 to new iMac Retina 2019.
Now I also got this Problem! Unable to work with correct colors in Xd. Terrible!
I'm facing a lot in color difference while export in any formate (including the final prototype). PFA. When I push the final prototype to client-side getting a lot much feedback regarding the color difference. Kindly consider this as a high priority to fix or I might lose my clients.