Setting color in 3JS code vs. what lil-gui uses

Questions
1

I’m having trouble understanding how an object’s color value in lil-gui (and graphic appearance) doesn’t always agree with the value set by code.
For a simplified example, setting scene.background = new THREE.Color(‘#ffffff’) produces a color that lil-gui’s object value agrees with. But when I edit the code value to ‘#feffff’ the resultant display and lil-gui value is ‘#fcffff’. It’s much more confusing dealing with complicated color values.
Perhaps this has something to do with the discussion referenced here?

2

Hi @bob1942 – see this post on lil-gui:

three.js works with color in Linear-sRGB by default, but lil-gui assumes everything is sRGB, so conversions must be made when transferring values between the two. You can either do the conversion explicitly, or rely on the fact that three.js converts to sRGB automatically for hexadecimal and CSS-string color representations. For example:

const params = {
  color: material.color.getHex(THREE.SRGBColorSpace),
};

gui.addColor(params, 'color').onChange((value) => {
  material.setHex(value, THREE.SRGBColorSpace);
});
3 Likes
3

Many thanks for reference and your own explanation.
I’ve read warnings about Color complexity but didn’t dive in enough to understand the situation.