UI Toolkit Editor Colors Different than in Game Mode - Help Please

I recently started doing UI with UI Toolkit and I love it. I’m a web designer/developer as my main profession and this is right up my ally. When doing some basic layout work, I noticed that the colors in my Toolkit Editor view were different than what they look like in the Game View.

In the attached image I have mint boxes that are different opacity values. The lower boxes are in the UI Toolkit Editor. The boxes above are in Game View. The first box is 4% (0.04) opacity. The next is 24% (0.24), the third is 60% (0.6). What I can’t figure out is why, in the Game View, does it appear much higher? It looks like the 4% opacity box is actually 20% opacity. I’ve tried testing if it was post-processing, I’ve tried starting new projects, a fresh URP and a SRP project, but to no avail. All the projects do the same thing.

As a designer, having control over what something looks like is so important. If I say be 4% opacity, I want it to be just that. I haven’t had any issues with this using the ol’ canvas UI. If anyone knows why this is happening, I would be so grateful for your advice on how to fix it. I’ve spent a couple days in the UI Toolkit so far would very much like to keep using it.

Thanks ahead of time!
Kevin

You might not have the same color of background in the UI Builder and in the game scene.

For UI Builder, you can change it on the document level (it only affects UI Builder). In your game scene, you probably see the background color/skybox of your camera.

Are these just elements with color, or images you imported?

The issue might be a linear vs gamma color space mismatch. I don’t know enough about the reasons or solutions, just that this often strikes designers by surprise.

I guess it is still the same issue: Color/blending mismatch between UI Builder (Gamma) and Game View (Linear) - Unity Engine - Unity Discussions

@kevinbgent @NadaZilch Has anyone filed a bug report? Also you shouldn’t mark your topic as Question. This is clearly a visual defect.

@CodeSmile Thanks for the reply! These are just VisualElements with a background color assigned to them. I’m not familiar with Linear vs Gamma color space mismatch. I’m guessing that might be part of it. Is there something I can do about forcing the UI to use the same space?

This is exactly my issue!

@Laicasaane Oh I wasn’t aware this was a bug. I’d be happy to change it to a bug, although, I can’t quite find out where to do that.

@raaaah_man thanks for the reply! Unfortunately the backgrounds are all set to #000000 (black) and that wasn’t the issue. Although I wish it was. :frowning:

It will be more helpful if you make a small reproducible project and file a bug report with it via the menu Help > Report a Bug... within Unity Editor.

Unity QA will tell you if they’re already aware of this issue.

I aslo originally marked my post as a question because I assumed I just needed to configure something on my end. Later, however, I found another thread where a Unity staff member explicitly acknowledged that they are aware of the issue.

In any case, it might be a good idea to create a bug report, as @Laicasaane suggested.