Below are two screenshots in material and UI editors:
Question is: is it a bug? If not, then how to enter the proper color. For example, in Photoshop I have green equal to 100, what should I enter inside Color Picker to get the same color in material and UI?
The Photoshop color picker should show the RGB hex value. You can just copy/paste that into the UE4 color picker.
Note that there’s another two digits for the alpha value (RGBA) at the end of the UE4 hex code.
This will not solve the problem of brighter colors in UE4 which I have described. I have selected HEX color input field in screenshots, 006400 is equal to 100 of green. The result color is different (brighter) than in Photoshop and equals to 166 of green. Try to colorpick from my screenshots.
Most parts of the UI show the “gamma-corrected sRGB” value of the colors. In the color picker you can preview this by ticking the sRGB check box in the upper right corner.
The engine converts the gamma space texture to linear space and back to gamma space.
More info here.
Just to expand on ousnius’ answer,
The difference you are seeing between the Color Picker and the Final Engine Color is based on the Color Space you are using in the Color Picker. Without sRGB checked you are using a Linear RGB colorspace which allows you to see the mathematically linear color (16 bit) inputted into the rendering engine, sRGB is the final converted color (8 bit) that will be shown on the monitor based on current Color standards and current HDTV and CPU Monitor standards. It is also the default colorspace for most HDTV and Montiors which do not use a Wide Gamut, so it is what the Editor uses to preview items outside of the color picker to ensure a consistent appearance across multiple platforms.
There is a wonderful explanation of the math behind this conversion over at Stackoverflow, graphics - What are the practical differences when working with colors in a linear vs. a non-linear RGB space? - Stack Overflow
Thank You
Eric Ketchum
Thank you Eric. But the question is why sRGB in preview is brighter than same RGB? Due to attached by you URLs 100 of green in sRGB is darker than 100 of green in RGB, but Unreal shows it brighter. Why?
I would very appreciate if you help me with my main question, please: how to enter proper color in Color Picker?
Example:
Designer uses eyepicker on UI prototype in Photoshop and it shows 100 of green. What should he enter in UE4 Color Picker to get the same color of UI?
Hey -
I am digging into this issue a little further and working with engineers to identify if there is an issue or a correct workflow to follow. As soon as we identify any additional information I will let you know. In the meantime, I am leaving this question unanswered.
Thank You -
Eric Ketchum
Hello -
We have engineers looking into this issue currently, for reference UE-6942. As soon as I hear anything further I will report back here.
Thank You
Eric Ketchum
Not sure if it’s much help when working with the UI, but I just stumbled into this problem myself and managed to make a fix for it when working with colors in materials. The article from stackoverflow that Eric Ketchum linked to basically explained there is a connection between sRGB (that shows up in the preview and the scene) and Linear colors (that you used to input colors in the color wheel), and showed a formula to translate between them. I just took this formula and put it inside a material function to use whenever I needed to input linear colors into my materials (from photoshop or samples, for example). It does correct the colors (running version 4.7.3), but I’m not sure if it’s actually a reliable solution.
This first image shows this material function. It takes an input color, splits it and runs the “linear>srgb formula” on each channel. The actual formula is inside the “Red/Green/Blue” comment boxes, and it’s just duplicated for each channel. Notice how the returned color is the same as the linear (non-sRGB) color in the color picker. Sorry if the layout is messy, I’m new with node editors.
This second image just shows that function (named srgbColorFix) in the actual material where I needed color corrected.
Thank you for an answer. I have created similar standalone script, which takes linear RGB (as from Photoshop) and converts it to a hex color value, which looks the same in UE4. But this does not solve the problem, it is just a workaround which will spoil all colors in project when Epic releases patch with color system fix.
Wouldn’t such a color “fix” spoil the colors for ANY project? As far as I understand, the engine currently only supports sRGB hex input, and any change to conform to linear input would have to affect anything previously input. The only sensible fix I could imagine would be a built in function that keeps track on input hex strings specified as linear and converting those for output.
I think there’s some danger in manipulating the hex you store in the color node with a standalone script, as there’s no way to tell whether a single hex value has been converted simply by looking at it (could mean you accidentally convert one color twice) . You’d either have to manually keep track on what colors you had converted/reversed or simply assume you had converted all of them. The material function approach could be seen as a “check box” that tells the engine an input value is representing a linear color.
Fix can be done as optional checkbox noted as “Deprecated” (marked as true by default for all previous projects). Also, the problem of spoiling all previous projects is not the argument not to fix the bug, imho. The proper solution should be found.
In case you perform color transformation using blueprint during runtime you may drop FPS. In a production of a huge game it make sense to patch UE4 and embed the standalone script inside the editor’s color picker.
Hi guys,
I’ve coded a little function in googlescript (I think it’s javascript). It takes a string formated like this #FFFFFF, performs the appropriate conversion then outputs the corrected color in the same format.
So you can feed it with a direct copy from the Photoshop color picker, then it outputs a string you can paste in the Unreal colorpicker.
Here you go :
function sRGBConvert(val)
{
val = val.toUpperCase();
var r = 0;
if(val.charCodeAt(1) > 60)
r += (10 + val.charCodeAt(1)-65) * 16;
else
r += (val.charCodeAt(1)-48) * 16;
if(val.charCodeAt(2) > 60)
r += (10 + val.charCodeAt(2)-65);
else
r += (val.charCodeAt(2)-48);
var g = 0;
if(val.charCodeAt(3) > 60)
g += (10 + val.charCodeAt(3)-65) * 16;
else
g += (val.charCodeAt(3)-48) * 16;
if(val.charCodeAt(4) > 60)
g += (10 + val.charCodeAt(4)-65);
else
g += (val.charCodeAt(4)-48);
var b = 0;
if(val.charCodeAt(5) > 60)
b += (10 + val.charCodeAt(5)-65) * 16;
else
b += (val.charCodeAt(5)-48) * 16;
if(val.charCodeAt(6) > 60)
b += (10 + val.charCodeAt(6)-65);
else
b += (val.charCodeAt(6)-48);
r /= 255.0;
g /= 255.0;
b /= 255.0;
r = FixValue(r);
g = FixValue(g);
b = FixValue(b);
r *= 255.0;
g *= 255.0;
b *= 255.0;
val = "#";
if((r>>4) > 9)
val += String.fromCharCode((r>>4) + 65 - 10);
else
val += String.fromCharCode((r>>4) + 48);
if((r % 16) > 9)
val += String.fromCharCode((r % 16) + 65 - 10);
else
val += String.fromCharCode((r % 16) + 48);
if((g>>4) > 9)
val += String.fromCharCode((g>>4) + 65 - 10);
else
val += String.fromCharCode((g>>4) + 48);
if((g % 16) > 9)
val += String.fromCharCode((g % 16) + 65 - 10);
else
val += String.fromCharCode((g % 16) + 48);
if((b>>4) > 9)
val += String.fromCharCode((b>>4) + 65 - 10);
else
val += String.fromCharCode((b>>4) + 48);
if((b % 16) > 9)
val += String.fromCharCode((b % 16) + 65 - 10);
else
val += String.fromCharCode((b % 16) + 48);
setActiveValue(val);
}
function FixValue(val)
{
if(val >= 0.04045)
val = Math.pow((val + 0.055) / 1.055, 2.4);
else
val = val / 12.92;
return val;
}Thank you for this script, I have been using similar solution. But unfortunately it is not a perfect method for a big game production 
I totally agree, this should be embedded in the standard UE4 colorpicker.
I’m also working on a commercial title and it’s the only solution I’ve got for now…
Can I just have a color picker that lets me choose a color that appears the same after the correction? That would be a helpful option. I understand the conversion, but it’s a huge pain to have to tinker so much to get the final color I see on screen.
Cheers!
I dug out the root of the problem. Due to current color managements system it is impossible to set all spectrum of dark colors in UE4. For example, set color 0D1500 in Photoshop and try to get the same in UE4. The closest color you can get is 141400 (if you color pick the screenshot in Photoshop) what is equal to 010100FF value in UE4 colorpicker.
The problem is in file ElementBatcher.cpp. There are some calls to method GetElementColor which converts float-linear color into byte-linear color and loses dark colors forever.
I make a simple HTML page with the “Converter” above. Simple paste colors from Photoshop on RGB Field, and result is a “unreal” color.
This problem solved in 4.9 plus this pull request adds sRGB HEX color input field (like in Photoshop) https://github.com/EpicGames/UnrealEngine/pull/1436.