In three.js, the following code ...

const material = new THREE.MeshBasicMaterial();

gui.addColor(material, 'color');

...will display a different color in the picker than the material starts with, and will transfer the color from the picker to the material incorrectly. To fix that, we need to write:

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

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

The THREE.SRGBColorSpace argument is optional – it's implied for hexadecimal and CSS string inputs — but included above for clarity. The browser's color picker uses sRGB, and three.js stores RGB components as Linear-sRGB.

Would you be interested in a PR adding a shorthand for conversion to/from predefined color spaces? I'm aware that the HTML color picker is always sRGB, but thought it could be nice to support input/output to a different color space as:

gui.addColor(material, 'color', { sourceColorSpace: 'srgb' | 'srgb-linear' });

See https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791 for a bit more background on color management in recent three.js versions. No worries if this feels out of scope for lil-gui!