Editor: Set ColorManagement.legacyMode = false

[donmccurdy]

The <input type="color"> HTML element provides an sRGB color picker¹, and the preview swatches shown in the picker reflect that, but the Editor does not. I think it would be best to account for the color space when working in the Editor. This allows, for example, setting #1A7FEB anywhere in the Editor and seeing the color consistently in the HTML picker, MeshBasicMaterial color, Fog color, and so on.

Related:

• https://discord.com/channels/685241246557667386/1059601330211131402/1059601330211131402

---

¹ By default in Safari and Firefox, and with no other options in Chrome. The option to reach Linear-sRGB ("Rec. ITU-R BT.709-5") in Safari and Firefox is pretty hard to find, and I doubt we can expect users to do so. That option does not affect the value returned to the page, which appears to be sRGB in any case.

[donmccurdy]

Note that while setting #1A7FEB in the color picker is equivalent to setHex(0x1A7FEB) in a three.js project with legacyMode=false enabled, setting the RGB or HSL components individually in the HTML picker has a different effect than setRGB or setHSL. The HTML picker interprets those as sRGB and we interpret them as Linear-sRGB. Blender does the same as we do, and I think that is the best choice here.

An alternative would be to provide a color picker with proper support for other color spaces. I'm open to this, but don't know of one to recommend. If the HTML picker evolves to handle color spaces provided by CSS Color Module Level 4, that would also help a lot.

[donmccurdy]

Example, after assigning the same color to MeshBasicMaterial's color and Background in the editor. Note that the Sidebar's "Color" swatch does not match the material without this change:

before	after

[CodyJasonBennett]

Is the editor updated in lockstep with three releases? Noting #24975 (comment), this will need to be updated alongside #24940.

[donmccurdy]

Is the editor updated in lockstep with three releases?

Generally, yes. Perhaps some exceptions for a patch.

I'd like to see both this and #24940 land, but I think they can land in separate releases without harm.

[Mugen87]

https://raw.githack.com/donmccurdy/three.js/editor/color-management/editor/index.html

[Mugen87]

Published apps also need an enhancement so the colors look exactly like in the editor. You just have to add THREE.ColorManagement.legacyMode = false; in the following document:

https://github.com/mrdoob/three.js/blob/dev/editor/js/libs/app/index.html

[donmccurdy]

Done, thanks!