Merge pull request #9869 from Popov72/colorpicker-round

Hex conversion for colors: use round instead of trunc

sharedUiComponents/colorPicker/colorPicker.tsx

@@ -179,25 +179,25 @@ export class ColorPicker extends React.Component<IColorPickerProps, IColorPicker
                 </div>
                 <div className="color-picker-rgb">
                     <div className="red">
-                        <ColorComponentEntry label="R" min={0} max={255} value={this.state.color.r * 255 | 0} onChange={value => {
+                        <ColorComponentEntry label="R" min={0} max={255} value={Math.round(this.state.color.r * 255)} onChange={value => {
                             this.state.color.r = value / 255.0;
                             this.forceUpdate();
                         }}/>
                     </div>   
                     <div className="green">
-                        <ColorComponentEntry label="G" min={0} max={255}  value={this.state.color.g * 255 | 0} onChange={value => {
+                        <ColorComponentEntry label="G" min={0} max={255}  value={Math.round(this.state.color.g * 255)} onChange={value => {
                             this.state.color.g = value / 255.0;
                             this.forceUpdate();
                         }}/>
                     </div>  
                     <div className="blue">
-                        <ColorComponentEntry label="B" min={0} max={255}  value={this.state.color.b * 255 | 0} onChange={value => {
+                        <ColorComponentEntry label="B" min={0} max={255}  value={Math.round(this.state.color.b * 255)} onChange={value => {
                             this.state.color.b = value / 255.0;
                             this.forceUpdate();
                         }}/>
                     </div>        
                     <div className={"alpha" + (hasAlpha ? "" : " grayed")}>
-                        <ColorComponentEntry label="A" min={0} max={255} value={this.state.alpha * 255 | 0} onChange={value => {
+                        <ColorComponentEntry label="A" min={0} max={255} value={Math.round(this.state.alpha * 255)} onChange={value => {
                                 this.setState({alpha: value / 255.0});
                                 this.forceUpdate();
                         }}/>

src/Maths/math.color.ts

@@ -296,9 +296,9 @@ export class Color3 {
      * @returns a string containing the hexadecimal representation of the Color3 object
      */
     public toHexString(): string {
-        var intR = (this.r * 255) | 0;
-        var intG = (this.g * 255) | 0;
-        var intB = (this.b * 255) | 0;
+        var intR = Math.round(this.r * 255);
+        var intG = Math.round(this.g * 255);
+        var intB = Math.round(this.b * 255);
         return "#" + Scalar.ToHex(intR) + Scalar.ToHex(intG) + Scalar.ToHex(intB);
     }
 
@@ -861,15 +861,15 @@ export class Color4 {
      * @returns a string containing the hexadecimal representation of the Color4 object
      */
     public toHexString(returnAsColor3 = false): string {
-        var intR = (this.r * 255) | 0;
-        var intG = (this.g * 255) | 0;
-        var intB = (this.b * 255) | 0;
+        var intR = Math.round(this.r * 255);
+        var intG = Math.round(this.g * 255);
+        var intB = Math.round(this.b * 255);
 
         if (returnAsColor3) {
             return "#" + Scalar.ToHex(intR) + Scalar.ToHex(intG) + Scalar.ToHex(intB);
         }
 
-        var intA = (this.a * 255) | 0;
+        var intA = Math.round(this.a * 255);
         return "#" + Scalar.ToHex(intR) + Scalar.ToHex(intG) + Scalar.ToHex(intB) + Scalar.ToHex(intA);
     }