I’m working on some motion graphics and need to be able to have opacity layers match mockups in Photoshop/Figma. It appears the difference is sRGB vs Linear color space. To illustrate, I created a solid black rectangle (sRGB #000000FF) and solid purple rectangle (sRGB #7500FFFF). Then I created white rectangles in both UE (top row) and Photoshop (bottom row) at 50% opacity (#FFFFFF80).
As you can see, the blending of each white rectangle is significantly different between UE and Photoshop. Since most design apps use sRGB (Photoshop, Figma, even web/css), is there a way to blend opacity in UE to match what clients and designers give me?
Setup: I’m using UE 5.4.3, all materials are surface transluscent unlit, and the 50% opacity layers are set slightly closer to camera to ensure they’re rendered on top. The working color space is sRGB/Rec709 and “enable alpha channel support in post processing” is set to the default “linear color space only” (not sure if this is even relevant). There’s a post process volume created by the new Motion Designer defaults that sets things like 0.0 bloom, 1.0 locked exposure, 0.0 tone mapping curve, all color grading unchecked, etc.
One thing I already tried is creating a custom material that samples the Scene Color and a solid white, then lerps the two at 0.5 which gives the same result as in the screenshot. I tried adding sRGBToLinear and LinearTosRGB nodes before and after the lerp on each (Scene Color and solid white) in every combination but nothing comes close to the Photoshop blend.
Any help would be much appreciated!