How do I invert the color of ui text to make it more readable, on a messy background?

[jebthedev]

I want to invert text color against a background, in order to make it more readable.

This is the effect I want (It’s a photoshop):

I’ve tried setting the text’s material to a material with an inverting shader, and it works, but it makes the text go blocky:

Any ideas on how I should do this?

-Thanks

[Pangamini]

You can create different inversion effects by playing with blend options and the output color (for example, only invert one or two of the channels). For more advanced background processing, you can use unity’s GrabPass and have the background accessible in a texture from your shader, but that’s far more expensive

[lassade]

Donwload the build in shaders then use the text shader as a base for your shader. You can find them in the unity download archive.

Download Archive

[jebthedev]

I found an answer here that seemed to work:

Changing text color based on background to make readable

I want to simulate a progress bar, but have text over it, similar to Homeworld 2’s style. How would i do this? Here is an example: Notice how the text changes as the status bar grows over the text, compare both status bars for the build queue: [homeworld2pic2]

[Harinezumi]

I think the best way is to convert the RGB color to HSV space (where the color is in the H value), and invert it, then convert it back:

public static Color Invert ( Color rgbColor )
{
    float h, s, v;
    Color.RGBToHSV(rgbColor, out h, out s, out v);
    return Color.HSVToRGB((h + 0.5f) % 1, s, v);
}

[Fauxhammer]

I’ve managed to do something similar. Using this setup:

"DateText" and "DateTextInverted" contain only Text components with inverted colors.
"DateIndicator" has Image and Mask components

Result: