[Design]- Banding in Exported Gradient Asset

How are you using the graphic? If it's a website, can you use the SVG file (it would be peferred for vectors on the web)?

From my judgement, the very subtle gradients you're trying to achieve are hard to retain in a JPEG, because it's using a lossy compression. So at any quality beneath 100%, its bandwidth and color nuances are being restricted, and details are being synthetically generated in matrices of 8 x 8 pixels, in order to get a smaller filesize. However, I discovered that the "100%" JPEG from the Export Batch command is certainly NOT truly 100% !! When I save a similar gradient from Photoshop (without using dithering*) at 100%, it's much better than the one from Adobe XD. That's a flaw !

* Note: both Illustrator and Photoshop are capable of using dithered gradients, i.e. they optionally add a light amount of noise in the gradient (Illustrator on-screen and Photoshop in the pixels), to visually 'disturb' those apparent banding lines. PostScript (and PDF) also improve gradients in this way, but Adobe XD (and the web, and app frameworks) probably don't care about it, yet...

The PNG version should behave well (it uses losless compression), and it does. It's being exported with 8 bits per (RGB) channel, which is enough for rendering appealing gradients. If you see any banding, then this might also be caused by your screen. I gauged the exported PNG in Photoshop and noticed a slightly different RGB value for each pixel, so the correct data is in there !

There's no use in showing any detailed image here in my post, because the forum would severly compress the image anyway. But to get the gist, this is the link to my Preview, which might also be compromised in viewing quality.

Now there might be another effect causing banding: Blend Modes. In the second artboard of my preview, you can see how a Color Overlay Blend Mode (one large green rectangle) is suffering from clipped color gradations. Did you use any of them ?

Hi there,

Thanks for reaching out. Adobe XD is yet not color-managed, it should be using SRGB throughout. I'd request if you can check if your monitor is configured correctly to display SRGB correctly? I'd also request if you can share your comments and upvote this request here: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/17480899-color-management-set-color-profiles

This is the best way of communicating with the Engineering and Product Management teams regarding issues and suggestions so they can be implemented in future releases. 

Regards

Rishabh