I've created a custom map from Adobe Illustrator vector (which has been saved for web in *.png and then converted to GeoTIFF via GDAL; then I've uploaded it to MapBox Studio webapp and created style with resulted tileset).

One problem in the end - tiles colors. For example (resulted .jpg from MapBox - on the left, source .png - one the right):

MapBox colors artefacts

What do I need to do to get better quality of result tiles?

Is there any way to use vector tiles (the source is .ai file)?

closed as too broad by PolyGeo May 31 at 22:51

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

This looks to me like the typical color management issue. If one or more of the used applications or (intermediate) data formats used is not aware of color management and ICC color profiles, you can easily end up with shifting colors.

The best thing to do to prevent this as much as possible, is to convert your data to sRGB right in the first step, where you export from Adobe Illustrator. I don't have experience with Illustrator, but in Photoshop this is easy. Don't just assign a sRGB profile, but really convert it to sRGB if the original data is in another color space (e.g. AdobeRGB) to avoid these issues. By converting it, even if something else in the toolchain is not aware of ICC color profiles, the colors will still be encoded close to what most software assumes by default.

sRGB is still the biggest common denominator for this kind of thing and the "average" monitor, and will give you the biggest chance of seeing, exactly or at least approximately depending on whether the monitor is calibrated and the web browser is color managed, the same colors in your final output, as most browsers only relatively recently became color managed and started using color profile information if included in images.

An article like this may be interesting as well for you: http://www.color-management-guide.com/web-browser-color-management.html

Not the answer you're looking for? Browse other questions tagged or ask your own question.