THREE.Color getHex() sometimes returns negative values

Describe the bug

Sometimes, when creating a Threejs Color from 3 separate rgb values the color gets created in a strange way that all the color manipluation related to getting hex values returns wrong values.

Code to Reproduce

Steps to reproduce the behavior:

var r = [Math.random()*256, Math.random()*256, Math.random()*256]; var rand_color = new THREE.Color(r[0], r[1], r[2]);

console.log(r);
console.log(rand_color);
console.log(rand_color.getHex());//this is sometimes negative
console.log(rand_color.getHexString()); //this string is then affected too 

For example, these are values that create such negative color:

var c = new THREE.Color(172.10908897579378, 171.64128648818325, 101.05378373805644);
console.log(c.getHex()); //returns -1413112664
console.log(c.getHexString()); //returns '3a6358', which is different color than what THREE.js internally represents

edit: This does not always happen with decimals only as i previously thought, it happens with integers too, for example

var c = new THREE.Color(241, 52, 177);
console.log(c.getHex()) // -264471473

Expected behavior

Getting the same hex value as the one that THREE.js represents internally too.

Platform:

• Device: Desktop
• OS: Windows
• Browser: Chrome, Firefox
• Three.js version: r124

[mrdoob]

Both answers are incorrect.

But I think returning black when the color is below 0, and white when the color is above 1 is easier to understand than returning a negative hex.

That’s also how the web behaves:

// Makes the background white and doesn't warn the user that colors go from 0 to 255
document.body.style.backgroundColor = 'rgb(512, 512, 512)'

// Makes the background black and doesn't warn the user that colors go from 0 to 255
document.body.style.backgroundColor = 'rgb(-512, -512, -512)'

There may be other methods where this may make sense but I do not think we should clamp Color.

[mrdoob]

We can reconsider if we get any reports.