Inconsistent colors when passing hex value vs Color object to meshBasicMaterial

[pichiste]

Hi there, I'm seeing a discrepancy in the color that gets displayed if I pass a raw hex value vs a Color object to the color attribute of meshBasicMaterial.

Here's a live demo of the issue:
https://codesandbox.io/s/interesting-proskuriakova-hri22

Is this a bug or did I simply missed something in the documentation?

Code:

const hex = 0xff21ff;
const color = new Color(hex);

const Scene = () => {
  return (
    <group>
      <Box position-x={-1}>
        <meshBasicMaterial color={hex} />
      </Box>
      <Box position-x={1}>
        <meshBasicMaterial color={color} />
      </Box>
    </group>
  );
};

Output:

[drcmda]

r3f has auto color management. that means colors will be consistent with photoshop/blender in the srgb color space and have a correct gamma. threejs has incorrect gamma, it's colors blow out. but r3f won't mutate externals, so if you want to provide your own color you must convert it yourself: const color = new Color(hex).convertSRGBToLinear() this is what you would normally have to do to any color and texture systemwide in plain three, see: https://www.donmccurdy.com/2020/06/17/color-management-in-threejs

you can switch off color management, but i would not recommend it:

<Canvas linear>