x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

How to set the proper color in Color Picker?

Below are two screenshots in material and UI editors:

  1. Click on color and Color Picker opens

  2. Set the color (for example 100 of green)

  3. Colorpick the result color (it would be 166 of green)

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?

alt text alt text

Product Version: Not Selected
Tags:
more ▼

asked Jan 19 '15 at 01:46 PM in Bug Reports

avatar image

RenovatioNova
117 6 11 18

avatar image ousnius Jan 19 '15 at 02:24 PM

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.

avatar image RenovatioNova Jan 19 '15 at 03:54 PM

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.

avatar image MessedCircuit Mar 20 '15 at 01:33 AM

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.

alt text

This second image just shows that function (named srgbColorFix) in the actual material where I needed color corrected.

alt text

material.png (251.3 kB)
avatar image RenovatioNova Mar 20 '15 at 08:26 AM

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.

avatar image MessedCircuit Mar 20 '15 at 12:45 PM

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.

avatar image RenovatioNova Mar 20 '15 at 12:53 PM

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.

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

5 answers: sort voted first

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.

more ▼

answered Aug 03 '15 at 03:56 PM

avatar image

RenovatioNova
117 6 11 18

avatar image MrBushido Aug 05 '15 at 08:14 AM

It was all a big misunderstanding! (Pull request hasn't hit the binary preview yet)

avatar image RenovatioNova Aug 05 '15 at 08:33 AM

In your example you copy sRGB HEX color from Photoshop and enter it into Linear HEX color field in UE4. Also checkbox "sRGB" on top of window affects only preview rectangle - it does not change color itself. My pull-request (link above) adds additional field (selected on the screenshot below) which allows to copy sRGB HEX color from Photoshop and input it into UE4 without convertion.

alt text

avatar image MrBushido Aug 05 '15 at 09:22 AM

My bad. I just opened the 4.9 preview 2 to check out your change and thought you had added the other hex box since it doesn't appear they've added your change yet.

Ps. You're an absolute star btw, great patch :D

avatar image gmpreussner STAFF Sep 10 '15 at 05:58 PM

Merged in GitHub commit. Thanks!

avatar image Ayewyn Oct 03 '15 at 09:45 PM

Is the color picker still broke/broke again? I'm on 4.9.2 and running into the same problems originally described and only see one hex box.

avatar image Lovecraft_K ♦♦ STAFF Oct 05 '15 at 02:57 PM

Hi Ayewyn -

The Commit to add the additional sRGB Hex box was not tested in time for a 4.9 release, you can get the commit from GitHub at the link above.

Thank You

Eric Ketchum

avatar image Ayewyn Oct 05 '15 at 08:33 PM

Thanks for the Reply. The link seems to be 404'd for me tho.

avatar image Lovecraft_K ♦♦ STAFF Oct 05 '15 at 09:07 PM

Hi Ayewyn -

You will need a GitHub Account to access the GitHub Commit. They are free and you will need to connect it to your Unreal Engine account to get access to the Engine Source. That is most likely the reason for the 404.

Thank You

Eric Ketchum

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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;
 }
 

more ▼

answered Mar 25 '15 at 08:37 PM

avatar image

elliotek
61 2 4 10

avatar image RenovatioNova Mar 26 '15 at 07:41 AM

Thank you for this script, I have been using similar solution. But unfortunately it is not a perfect method for a big game production :(

avatar image elliotek Mar 26 '15 at 09:46 AM

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...

avatar image Raziєl Jul 24 '15 at 11:39 PM

I make a simple HTML page with the "Converter" above. Simple paste colors from Photoshop on RGB Field, and result is a "unreal" color.

https://jsfiddle.net/ue8st3cp/1/

avatar image erebel55 Jan 13 '16 at 08:00 PM

This was off a tiny bit for me but very close. Thank you so much!

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

this is not solved... and it's driving me crazy... I'm doing something as simple as having the engine randomly pick a value... and the final color is not right... and is severely limited. A photoshop hex number is not helpful as I'm generating rgb values at random... unless I can randomly generate hex values... IS there a fix for this? alt text I mean there are literally millions of color combinations and all that ever appear are 8 or so solid 255 colors!

colors.png (602.4 kB)
more ▼

answered Mar 13 '18 at 06:28 PM

avatar image

maggotcakes
11 1 2 5

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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

more ▼

answered Mar 19 '15 at 01:33 PM

avatar image

Lovecraft_K ♦♦ STAFF
36.7k 702 260 737

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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.

more ▼

answered Jan 19 '15 at 05:10 PM

avatar image

ousnius
61 1 1 4

avatar image Lovecraft_K ♦♦ STAFF Jan 19 '15 at 06:54 PM

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, http://stackoverflow.com/questions/12524623/what-are-the-practical-differences-when-working-with-colors-in-a-linear-vs-a-no/12894053#12894053

Thank You

Eric Ketchum

avatar image RenovatioNova Jan 20 '15 at 08:21 AM

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?

avatar image RenovatioNova Jan 20 '15 at 08:25 AM

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?

avatar image Lovecraft_K ♦♦ STAFF Jan 20 '15 at 04:41 PM

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

avatar image CleverCoder May 15 '15 at 05:07 AM

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!

avatar image RenovatioNova May 15 '15 at 10:19 AM

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.

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question