TextMesh Pro TextMesh Pro Colors highly inaccurate

I'm having an issue where if I'm changing colors via Vertex Color alone from the TMP component in inspector, the color is not accurate. I've noticed that Vertex Color takes into account the material color and does some math on top of it. In order to get the exact color to show up, I have to do either of these two steps.

1. Only change TMP color via the material itself, which means I have to create a new material preset everytime I have a new color I want to use for text. This gets messy really fast and my project will be overflowed with materials.

2. I have to edit both Vertex Color and Color Gradient with the same color value to get the exact color to show. Even if I uncheck Color Gradient, TMP still takes the it into account.

Is there a more efficient way of doing this correctly via the inspector? It is a steep learning curve to try and understand this process for new users who are used to design software that lets you edit color in a simple, straightforward manner. Appreciate any advice, thank you.

 

The Material color will always affect the Vertex Color. If the Material Color is 255, 255, 255, 255, then whatever the Vertex Color is set at is what will be used.

The Vertex Color is unique to each text object. The Material color is shared by all text object using this same material.

Please provide more detail on how the Vertex Color is not accurate when leaving the material to the default white?

 

Hi Stephan_B, thanks for the reply. I just realized that if the Player > Other Settings > Color Space is on Linear, what I described will happen. But on Gamma, what you described will happen. Is there a solution if for achieving the same result in Linear?

 

Hi @Stephan_B , I have the exact issue here.
Are texts rendered with a gamma correction while in Linear mode ?

 

Seems like the HDR color picker is used by default for all material colors in TMP. Replacing a line in DoColor method in TMP_BaseShaderGUI.cs seems to do the trick, but you need to modify the code inside the TMP package.

Set the hdr parameter to false.

Code (CSharp):

1.  
2. Color value = EditorGUI.ColorField(EditorGUILayout.GetControlRect(), s_TempLabel, property.colorValue, false, true, false);
3.  

 

Just noticed the same issue. Same color code on my icon (URP/Unlit shader) and TMP text, different results.
As mentioned above, setting up the color on the material itself does fix the issue but it's obviously far from ideal.

 

Same issue here, had to turn it off as suggested inside the package to get it to work.

Would be nice to turn off HDR colors entirely for the project/package

 

Please see if removing the [HDR] attribute in the SDF shader that you happen to use resolves the issue.

Since these shaders are contained in the TMP Essential Resources which were imported in your project, this would make it easier to handle until I can figure out what is going exactly with this.

TMP_SDF-Mobile shader

 

Had the same issue. Changing on shader did not work for me, changing directly on package like unity_FGs7Rwoa9O-xNQ said, did work.

Before:


After:

 

Thank you for the feedback. I will have to test both these things then.

 

We are facing same kind of problem when creating an animation clip that set the face color of the material, when creating an animation that set the exactly same color as base, the color result appear wrong.
We need to deactivate HDR in the shader and edit the code in the package as unity_FGs7Rwoa9O-xNQ said to have the desired color.
It could be great if we have the choice to switch on or off the HDR support

 

I need to look into this to figure out what is going on. Most likely this is something the graphic team will need to address as having this HDR attribute should not be affecting colors.

Could one of you please submit a bug report on this? If so, please post the case # once you have it and I will make sure to forward this to the graphic team.

P.S. Obviously, I can add / remove these HDR attributes or make the code changes but this seems like something we should not have to do.

 

Hi Stephan,
Thanks for your quick answer, here is the bug report we submit https://issuetracker.unity3d.com/product/unity/issues/guid/1334247

 

Hi Stephan, do you have any updates about this ?

 

I'd love to have some news too

 

I encountered the same problem today trying to create a SDF font material entering color values in RGB to match a sprite color. Color picker defaults to use HDR (HDR is also disabled from URP pipeline setting asset file).

The suggested workaround by turning off HDR for the color picker in TMPro package does not work for me, it will revert back to true automatically. But if you close Unity and then edit it and set the file as read only, the workaround does work.

Unity 2020.3.12f1.590.2 and Text Mesh Pro 3.0.6.

 

I think I found the solution. The problem, as mentioned earlier, is the color returned by the TMP shader does not account for color space being set to linear. It seems like shaders actually need to account for this conversion explicitly.

The fix for me was to edit TMP_SDF.shader (or duplicate it) and scroll down to the end and fine the line:

Code (CSharp):

1. return faceColor * input.color.a;

Replace it with:

Code (CSharp):

1. #if UNITY_COLORSPACE_GAMMA
2. return faceColor * input.color.a;
3. #else
4. return fixed4(GammaToLinearSpace(faceColor.rgb), faceColor.a) * input.color.a;
5. #endif

 

Mostly correct.

The added complication is that the Canvas system does convert the color to linear space when Unity is in Linear Color Space. However, when using a normal <TextMeshPro> component which uses the Mesh Renderer, there is no automatic conversion. Since both components may be using the same material / shader, you would end up with double conversion of the colors when using the <TextMeshProUGUI> component in Linear space as the colors would be converted once by the canvas batcher and then in the shader.

Having said that, I have revised the handling of color for the normal <TextMeshPro> component where it will do the conversion when using Linear Color space. Then for the <TextMeshProUGUI> components using the Canvas, the conversion is handled by the Canvas.

The above mostly resolves these issues but I still have to address potential inspector issues related to the use of the [HDR] attribute in the shader which alters the color in the inspector and being displayed. So right now, I believe those attributes should be removed. I am trying to sort this out and figure out of those [HDR] attributes are working as expected.

 

Good to know—thanks!

 

Hi, I've bumped into the same issue of the color mismatch and was able to fix it by using Unity Material Property Blocks to override material color for each instance without recreating new material for each new color. Hope that helps!

 

How do you use Material Property Blocks in this way?

What do you do to make it work?

Pretend I'm stupid. Secret: I am!

 

FYI: I did update the shaders and code in the latest preview of the TMP package to correctly handle Linear vs. Gamma color space for the normal TMP component.

 

It is no longer necessary after @Stephan_B update, but here it is:
I simply created a MPB instance in script and set _FaceColor value with my desired color and applied it to the Mesh Renderer of the text.

Code (CSharp):

1.             softTitleTextMPB = new MaterialPropertyBlock();
2.             softTitleTextMPB.SetColor("_FaceColor", Color.black);
3.             softTitleTextMR.SetPropertyBlock(softTitleTextMPB);

You can learn more about MPBs from this nice article:
https://thomasmountainborn.com/2016/05/25/materialpropertyblocks/

 

I'm running into this same issue. In the UI text components, the color seems correct. On the world space texts though the color is incorrect. I'm on TMP 3.0.6.

 

Please give version 3.2.0-pre.3 a try as I did make changes related to color space. Please be sure to read the upgrade notes and to re-import the TMP Essential Resources has the shaders have changes as well as some other resources.

 

I'm still seeing color issues with text outlines in Unity 2022.1.5f1 even after updating TextMeshPro to 3.2.0-pre.3

I have re-imported the TMP Essential Resources.

I see the correct outline colors on the fonts if I switch the color space from linear to gamma, but my project relies on the linear color space. Anything else I can try?

 

Thanks Stephan, upgrading to the 3.2.0-pre.3 package and reimporting TMP Essential Resources resolved the color issue for me.

 

Hey Stephan,
We tried this and are still having issues. Do you know if there's a workaround we can use currently? We're in unity version 2021.3.8 currently.

 

Are you using version 3.2.0-pre.3 and did you re-import the TMP Essential Resources which include the updated shaders?

 

Stephan,

Yes, I attempted with the updated version 3.2.0-pre.3 and reimported the essentials package. Please see the following screenshot of the outline color selector after making this change.

We are using the "TextMeshPro/Mobile/Distance Field" shader, maybe the fix you released in the preview version did not work for this one?

Edit: I have gone through and tested the other distance field shaders, they all still have the issue as well.

Thanks and I look forward to hearing back!

 

Hello I noticed that very often Text mesh pro colors materials are wrongly not full white (even if are 100% white) they are grey, it seems that it happens very often after going of or playmode/buildign game. Only one way to fix it is to restart unity

 

Hi! Is there an update to that issue?

 

+1

 

I've found that if you use the 'Vertex Color' field to choose the color you want, then copy and paste that color from the vertex color into the HDR color field of the Distance Field shader, then set the vertex color back to white, you end up with the correct color on the object.

 

+1

 

I reported bug and got answer:

So I wouldn't wait for official solution of the problem.

 

Strange that fixing bug is " issue is not aligned with our current development priorities". Fixing bugs should always be a priority but thanks for letting know

 

Encountered a similar problem, in my case related to canvases for which "Vertex Color always in gamma color space" field was checked.
Works fine for normal UI Elements, so I decided to compare the TMPro shaders with the default shaders.
Turns out, TMPro shaders are missing the needed conversion between linear and gamma color space. Here is my solution:
add

Code (CSharp):

1.  
2. int _UIVertexColorAlwaysGammaSpace;

just under _UIMaskSoftnessY.
In the VertShader, add this just after the line output.color = input.color:

Code (CSharp):

1.  
2.             if (_UIVertexColorAlwaysGammaSpace)
3.             {
4.                 if(!IsGammaSpace())
5.                 {
6.                     output.color.rgb = UIGammaToLinear(output.color.rgb);
7.                 }
8.             }

 

This situation is far worse than many others (Legacy Animation, FMOD, Input, etc). There's no other way to make diegetic UI of any sort without TMP for the foreseeable future. Some effort needs go into making it and the canvases that hold it as performant as possible whilst we struggle on for the next 5+ years waiting for Unity to realise UIToolkit was a good idea for the Editor UI, but not nearly sufficient for motion graphics style game menus and all the little (and big) stuff that happens in game worlds in world space.

 

As a workaround, I made a little tool for myself that adds a color picker to the TextMeshProUGUI component that converts the picked color to a working one. Maybe someone will find it useful too.

https://gist.github.com/lukz/0065cb4a18242aa94633ac02789234a3

 

Amazing. Thank you: @lukzdev

Very clever stuff!

 

Thanks for this!

For the simpler, mobile shader, the vertex shader looks a bit different, so I introduced your code immediately after computing

faceColor

, like so:

Code (CSharp):

1.  
2.            fixed4 faceColor = fixed4(input.color.rgb, opacity) * _FaceColor;
3.            if (_UIVertexColorAlwaysGammaSpace)
4.            {
5.                if (!IsGammaSpace())
6.                {
7.                    faceColor.rgb = UIGammaToLinear(faceColor.rgb);
8.                }
9.            }
10.  
11.            faceColor.rgb *= faceColor.a;
12.  

 

Also experiencing that issue but no fix seemed to work for me. I haven't tried the experimental package yet.

EDIT: experimental package did fix it.

 

This works. Thank you. I'm not really sure why though but if you don't also convert the alpha value you will get an additional unwanted gray outline. It can be seen by setting all the colors to full white. My fix was to reimplement the GammaToLinearSpace function with the alpha channel:

Code (CSharp):

1. half4 GammaToLinearSpace4(half4 sRGBA)
2. {
3.     // Approximate version from http://chilliant.blogspot.com.au/2012/08/srgb-approximations-for-hlsl.html?m=1
4.     return sRGBA * (sRGBA * (sRGBA * 0.305306011h + 0.682171111h) + 0.012522878h);
5. }

Also, this bug is half a decade old this year and still not fixed. (Except in a - as far as I can tell - completely scrubbed pre-release package that is nowhere to be found. It certainly does not show up in my package manager even with the Enable Pre-Release Packages setting enabled. Also why has it taken a quarter lifetime to get three lines of code production ready in the first place?)

I can't believe getting normal looking colors on any text in any game is just not a priority for Unity. I have used Unity since 2015, and professionally since 2018, and for every year that passes the engine becomes less usable and more infuriating to deal with. At this point the only Unity features I trust to be production ready are the ones they mark as "deprecated". I'm not gonna spend time and resources learning the new UI system that might be usable after a further decade of frustration.

It is regrettable that I end up giving such harsh critique, but with every single Unity project I've undertaken in the last years there ends up being a boat load of engine bugs that are either hard or simply impossible to fix.

 

Thank you @Dark-1-Games and @rockin, that solution worked for me!

I'm in Unity 2022.3.18f1, URP, TextMeshPro 3.0.8 (newest for this version of Unity at the time of writing)