UMG 4.6.1(4.7): Сolor distortion of UI

We are using Unreal Engine 4.6.1 (4.7 tested too) and faced the problem. The problem is in color distorsion between UI prepared in Photoshop (or GIMP) and Unreal Standalone Player. We have tried to export image from photoshop in png and tga image formats and import to UE, import psd file directly, but we have the same result - color distortion.
Windows Imaging have no similar problem with that source file, it is occuring at UE side only.

How to reproduce the problem:

  1. Import dark texture to Unreal Editor;
  2. Create UMG Widget and add that texture to image;
  3. Show UMG Widget in view port so we can see what’s going on;
  4. Make screenshot and compare image with source.

Example project and test image link here

I have attached comparison between Unreal Standalone Player (image in play mode) and GIMP (source image). At the middle of this image we have borderline at the junction line, image from UMG is some ligther.
May be somebody have similar distortions and have any ways to avoid this?

The engine uses a higher precision floating point back buffer to prevent color banding. This back buffer format does not support hardware sRGB. As a result we apply gamma correction ourselves in the Slate shader using the simplified ^(1/2.2) by default. It results in small differences like what you’re seeing when compared with the hardware sRGB profile.

EDIT: The normal scene rendering path (not slate) uses a more accurate version, we’re investigating using that instead of the simplified version for Slate.

The more accurate version of gamma correction is more expensive. If you want a short term solution you can modify SlateElementPixelShader.usf. Add this code:

float LinearToSrgbBranchingChannel(float lin) 
{
	if(lin < 0.00313067) return lin * 12.92;
	return pow(lin, (1.0/2.4)) * 1.055 - 0.055;
}

float3 LinearToSrgbBranching(float3 lin) 
{
	return float3(
		LinearToSrgbBranchingChannel(lin.r),
		LinearToSrgbBranchingChannel(lin.g),
		LinearToSrgbBranchingChannel(lin.b));
}

float3 GammaCorrect(float3 InColor)
{
	float3 CorrectedColor = InColor;
#if !(ES2_PROFILE || ES3_1_PROFILE)

	CorrectedColor = pow(CorrectedColor, /*InverseDisplayGamma.y*/1.0f);

	#if MAC
		// Note, MacOSX native output is raw gamma 2.2 not sRGB!
		CorrectedColor = pow(CorrectedColor, 1.0/2.2);
	#else
		CorrectedColor = LinearToSrgbBranching(CorrectedColor);
	#endif

#endif
	return CorrectedColor;
}

And replace:

	OutColor.rgb = pow(OutColor.rgb, InvDisplayGamma);

with

// gamma correct
OutColor.rgb = GammaCorrect(OutColor.rgb);

thank you for answers. this gamma correction algorithm works better for our ui.