Search Unity

Incorrect Image color / saturation for Sprites

Discussion in '2D' started by doarp, Feb 10, 2020.

  1. doarp

    doarp

    Joined:
    Sep 24, 2019
    Posts:
    147
    See this sample image: https://i.imgur.com/1EoAt2S.png
    When I load it in unity as a Sprite, the displayed image is slightly less saturated. It's clearly visible in the naked eye, especially when comparing the Unity editor with the original image side by side, but it can also be confirmed with a color picker.

    I've disable / toggled all lighting settings, switched color space to Linear / Gamma, toggled sRGB (Color Texture) in import settings (with Apply Changes). Nothing makes a difference. It's the same in the editor and the built player.

    I suspect it has something to do with sRGB, but I don't see any solution. Any other viewer I tried for the same file, including Mac Preview, Google Chrome, pixlr.com - they all show the image correctly, but Unity shows it less saturated.

    I've spent 2 hours trying to solve this, any help would be greatly appreciated.
     
  2. Wezai

    Wezai

    Joined:
    Dec 30, 2016
    Posts:
    74
    Show us your image import settings and player settings -> quality. Sometimes image compression changes the color a little bit and whatnot. Anyway, it will be easier for others to help if you provide that.
     
  3. doarp

    doarp

    Joined:
    Sep 24, 2019
    Posts:
    147
    Using the default settings, tried toggling the obvious ones like compression, didn't help: https://i.imgur.com/MTFh4E3.png

    The Quality settings are also default: https://i.imgur.com/8pqfklx.png

    I found a workaround: if I load the image to pixlr.com and then save it, the new image will then show correctly in unity.
    I also checked on photopea.com and photopea shows the image incorrectly, just like unity, but after loading the new image to photopea it also shows correctly.

    From my reading and debugging this, my understanding is that Unity (and photopea) read the image in its RAW (native) format, without applying sRGB color space mapping, while the other viewers I tried (Mac Preview, Google Chrome, pixlr.com) do apply sRGB translation and show the image correctly.
    When I re-save the image in pixlr.com, it saves the new image after the sRGB color translation, and thus the new image now shows correctly in both Unity and photopea.
    Not sure this is exactly how it works, but after several hours of tying almost everything that didn't work, this is the only thing that did and don't see any other explanation.

    What really bugs me is how no one else is having this issue, as this doesn't seem like a bug, but rather the way Unity works. Tried in 2019.2.19f and 2019.3.0f6, and the visual discrepancy, while small, is clearly visible.
     
    noadrow likes this.
  4. gareth_withVR

    gareth_withVR

    Joined:
    Nov 11, 2020
    Posts:
    4
    I also had this issue. I placed an image over a background where the background was made the same color as the image with the color picker. But it still looked very different. In the end, I found that changing the background color (specifically the source image to 'InputFieldBackground' fixed it. Very strange this was the default setting.
     
  5. raarc

    raarc

    Joined:
    Jun 15, 2020
    Posts:
    535
    by the way you didnt disable compression, should be compression: none

    also, use the material sprites default on the sprite renderer

    i tried to load this image into my project and it color picks to the same color exactly as the original
     
    Last edited: Dec 15, 2020